最近的项目有用到vue调用高德地图，就对高德地图的调用以及总结，以方便自己以后使用，希望也能帮到你们。
1.在页面中引入高德地图JavaScript API入口脚本
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=您申请的key值"></script>
2.在body中添加一个容器承载地图，以及设置div的大小和样式
<div id="container"></div>
3.初始化地图
loadmap() {
const that = this;
const map = new AMap.Map('container', {
zoom: 9
});
AMap.plugin('AMap.Geocoder', function () {
var geocoder = new AMap.Geocoder({
city: "010" //城市，默认：“全国”
});
var marker = new AMap.Marker({
map: map,
bubble: true
});
//为地图注册click事件获取鼠标点击出的经纬度坐标
map.on('click', function (e) {
//设置地图上所标点的坐标
marker.setPosition(e.lnglat);
//逆地理编码
geocoder.getAddress(e.lnglat, function (status, result) {
if (status == 'complete' && result.info === 'OK') {
// console.log(result.regeocode.formattedAddress)
that.ruleForm.address = result.regeocode.formattedAddress;
}
})
})
});
},