vue中使用高德地图动态加载标记点

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)
},