vue中使用高德地图动态加载标记点
首先通过创建一个Marker来创建一个标记点
methods: {
//地图
initMap() {
//地图加载函数已封装
this.$mapUtil.loadMap('2.0').then(AMap => {
this.map = new AMap.Map('Maps', {
zoom: 14,
center: [120.01, 30.27], //初始化地图中心点
})
var marker = new AMap.Marker({
position: [this.data.eventLocation.lon, this.data.eventLocation.lat],
icon: alarmIcon, // Icon的图像,地址引入const
offset: new AMap.Pixel(-25,-35)
})
marker.setMap(this.map)
// 缩放地图到合适的视野级别
this.map.setFitView([marker])
}).catch(() => {
console.log('地图加载失败!')
})
},
}
在渲染地图过程中发现,地图和标记点的位置不能同步加载,原因在于页面渲染地图完成时间先于页面获取坐标点信息,给地图加载添加一个延时函数,延时设置为500,即0.5秒
mounted() {
let self = this;
this.getLocationDetail();
setTimeout(function () {
self.initMap();
},500)
},