vue高德地图使用

先根据官方方法给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();//停止轨迹回放
 }