官网地址: 高德地图官方API
申请key后在项目项目下的index.html中引入
<script src='https://webapi.amap.com/maps?v=2.0&key='你申请的KEY' type="text/javascript" > </script>
在页面使用需要一个有高宽的盒子
<div id="container" />
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 600px;
}
初始化地图
//必须在mounted生成节点后再初始化地图
mounted() {
this.$nextTick(() => {
this.initMap();
});
},
//初始化地图
initMap() {
let dom = document.getElementById('container');
this.map = new AMap.Map(dom, {
zoom: 14, // 级别
center: this.location // 中心点坐标
});
this.setIcon(this.location);
//点击地图后的事件
this.map.on('click', (e) => {
let lat = e.lnglat.lat;
let lng = e.lnglat.lng;
this.setIcon([lng, lat]);
});
},
// 设置标记
setIcon(location) {
//先清楚标记点后在添加标记点
this.map.remove(this.marker);
this.map.setFitView();
this.marker = new AMap.Marker({
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
position: location,
anchor: 'bottom-center'
});
this.map.add(this.marker);
this.map.setFitView();
this.post = location;
},