最近的項目有用到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;
}
})
})
});
},