高德地图通过自定义marker属性extData和setTimeout回调实现对marker的实时监控功能

1. 创建地图

let map = new AMap.Map("myMap", {
    resizeEnable: true,
    zoom: 3,
    mapStyle: "amap://styles/darkblue",
    center: [103.752171, 36.068716],
  });

2. 创建markers

关键步骤，将数据的唯一值，定义到marker上

 extData: { id: item.id },

  let markers = []; //标记点数组
  let carInfor = []; //车辆信息数组
   $.ajax({
    url: "xxxxxxxxx", // 接口地址
    type: "get",
    success: function (res) {
      carInfor = res.status;
      for (let i = 0; i < carInfor.length; i++) {
        //1.获取车辆信息
        let item = carInfor[i];
        //2.获取车辆坐标
        let lnglats = [item.mlng, item.mlat];
        //3.创建车辆标记
        let marker = new AMap.Marker({
          //3.1标记坐标
          position: lnglats,
          //3.2标记图标
          icon: new AMap.Icon({
            image: "images/car.png",
            size: new AMap.Size(60, 62),
            imageSize: new AMap.Size(40, 42), //图标大小
          }),
          //3.3标记数据
          extData: { id: item.id },
          //3.4标记地图
          map: map,
        });
        markers.push(marker); //加入到数组中
      }
      map.setFitView(); 
    },
    error: function (err) {
      console.log("err", err);
    },
  });

3. 监控markers移动

  let timer = null; //定时器
  function startMonitor() { //开始监控
    clearInterval(timer); //清除定时器
    $.ajax({
      url: "xxxx", // 和上面获取makers数据的是同一个接口
      type: "get",
      success: function (res) {
        // 获取车辆信息
        let carData = res.status;
        // 找到对应的车辆marker，改变位置
        for (let i = 0; i < markers.length; i++) {
          let extData = markers[i].getExtData(); //获取marker的数据中的自定义数据
          for (let j = 0; j < carInfor.length; j++) {
            if (extData.id == carInfor[j].id) { //判断marker的id与数据中的id是否相等
              markers[i].setPosition([carData[j].mlng, carData[j].mlat]); //改变位置
            }
          }
        }
      },
      error: function (err) {
        console.log("err", err);
      },
    });
  
    timer = setTimeout(() => { //定时器
      startMonitor(); //递归调用
    }, 3000);
  }
  startMonitor(); //开始监控