vue调用高德地图

最近的项目有用到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;

}

})

})

});

},