高德地图报错 AMap.Geocoder is not a construct-CSDN博客

本文链接：https://blog.csdn.net/qq_41920758/article/details/145198075

getLocation 方法使用高德地图的Geocoder服务来解析省市县的地址，并返回对应的经纬度。你需要替换YOUR_AMAP_KEY为你的高德地图API的key，并且确保province、city和district数据是从你的Vue组件的数据中获取的。

请确保你已经遵循了高德地图API的使用条款，并且有一个有效的API Key。如果你的应用是商业用途，请购买相应的许可

原本我是这样写的，但是在谷歌或者其他浏览器的时候就报错了，而且谷歌等浏览器，pc端是只能定位到附近的基站

出现这个报错可以添加 AMap.plugin("AMap.Geocoder",function(){})

var geocoder;

AMap.plugin('AMap.Geocoder',function(){

geocoder = new AMap.Geocoder({

radius: 1000,

extensions: 'all'

});

})

1、简介
官方地址和使用前的准备：

官网找到对应的web服务文档
https://console.amap.com/

注册自己的高德地图key
2、script在线引入使用（非正规使用）
（1）页面上引入使用自己的高德地图key
在线引用1.4.15版本
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

2.0版本的引入和使用
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key="></script>

（2）使用
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>AMap JSAPI Loader</title>
<style>
html, body, #container {
height: 100%;
width: 100%;
margin: 0;
}
</style>
<script src="https://webapi.amap.com/loader.js"></script>
</head>
<body>
<div id="container" tabindex="0"></div>
<script>
var map;
AMapLoader.load({ //首次调用 load
key:'',//首次load key为必填
version:'2.0',
plugins:['AMap.Scale','AMap.ToolBar']
}).then((AMap)=>{
map = new AMap.Map('container');
map.addControl(new AMap.Scale())
map.addControl(new AMap.ToolBar())
map.add(new AMap.Marker({
position:map.getCenter()
}));
}).catch((e)=>{
console.error(e);
});

AMapLoader.load({ //可多次调用load
plugins:['AMap.MapType']
}).then((AMap)=>{
map.addControl(new AMap.MapType())
}).catch((e)=>{
console.error(e);
});

</script>
</body>
</html>