先根据官方方法给vue项目引入高德
高德文档地址
做好准备后使用

初始化地图

 AMap.plugin('AMap.MoveAnimation', () =>{//地图this.map = new AMap.Map("mapContainer", {resizeEnable: true,center: [116.397447,39.909176],//地图中心坐标zoom:12,//缩放值});this.infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(30, 0)});this.map.setFitView();
})

添加点标注与信息窗体

循环调用该方法就能得到多个点标注与信息窗体

pointDimension(e,i){var marker = new AMap.Marker({position: [e.longitude,e.latitude],map: this.map,icon:new AMap.Icon({image:require('@/assets/images/person3.png'),//用图片来表示点标注size:new AMap.Size(80,90),imageSize:new AMap.Size(80,90)}),offset: new AMap.Pixel(-13, -26),label: {direction: 'top',content: e.inspectName,offset: new AMap.Pixel(0, 30),}});// 信息窗体内容let id,name;id = this.staffList[i].inspectorId;name = this.staffList[i].inspectName;let popCentent = `<div id="infoWindowId" style="display:none;">${id}</div><div style="color:#333;font-size:14px;text-align:center;font-weight:600;margin-top: 10px;">${name}</div><divοnclick="startPlayBack()" style="border-radius: 20px;color: #1890ff;border:#1890ff 1px solid;padding: 0 10px;margin-top: 10px;font-size: 13px;text-align: center;cursor: pointer;">路径回放</div>`marker.content = popCentent;marker.on('click', this.markerClick);//信息窗体的点击事件marker.emit('click', {target: marker});this.markers.push(marker) //用一个数组来接受所有信息窗体对象
},
//点击信息窗体markerClick(e) {console.log('信息窗体点击',e)this.infoWindow.setContent(e.target.content);this.infoWindow.open(this.map, e.target.getPosition());},

在生命周期里监听信息窗体的点击事件

mounted(){//监听信息窗体事件window.startPlayBack = () =>{let id = document.getElementById("infoWindowId").innerText;}
}

想用更多的属性可以去文档里看 文档地址
删除指定的点标注

this.markers[i].setMap(null);//i为对应的下标

删除所有点标注

this.map.remove(this.markers);

关闭信息窗体

this.infoWindow.close()//关闭信息窗体

绘制轨迹回放

//绘制回放轨迹
drawingTrajectories(){this.polyline = new AMap.Polyline({map: this.map,path: [116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549],[116.478912,39.998549],showDir:true,strokeColor: "#28F",  //线颜色// strokeOpacity: 1,     //线透明度strokeWeight: 6,      //线宽// strokeStyle: "solid"  //线样式});this.passedPolyline = new AMap.Polyline({map: this.map,strokeColor: "#AF5",  //线颜色strokeWeight: 6,      //线宽});//轨迹回放地图中心随之变动this.markers[0].on('moving', (e) =>{this.passedPolyline.setPath(e.passedPath);this.map.setCenter(e.target.getPosition(),true)});},

轨迹回放的方法

//开始回放
movePersonnel(){this.markers[0].moveAlong(this.lineArr, {// 每一段的时长duration: 50,//可根据实际采集时间间隔设置// JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置autoRotation: true,});},//暂停回放pauseAnimation(){this.markers[0].pauseMove();},//继续回放resumeAnimation() {this.markers[0].resumeMove();},//停止轨迹回放stopAnimation(){this.markers[0].stopMove();//停止轨迹回放}