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的图像，地址引入constoffset: 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)},