高德地图定时刷新车辆位置

程序媛之博客

已于 2023-03-08 16:08:24 修改

阅读量1.9k

点赞数 1

分类专栏：前端文章标签：前端高德地图

于 2023-01-11 16:08:30 首次发布

本文链接：https://blog.csdn.net/qq_42080594/article/details/128646302

版权

前端专栏收录该内容

37 篇文章

订阅专栏

文章详细介绍了如何在Vue.js应用的public文件夹中的index.html文件里引入并初始化高德地图，包括设置地图中心、缩放级别、监听地图事件以及动态更新车辆标注。此外，还涉及到地图覆盖物的管理，如添加、删除和更新车辆标记信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在public文件夹的index.html文件引入高德地图

data() {

return {

zoomSize: 4,

setCenter:[110.387223, 34.673928],

map: null,

infoWindow: null,

isOpenInfo: false,

screenWidth: window.screen.width,

}

},

mounted() {

this.initMap()

},

beforeDestroy() {

if (this.map) this.map.destroy()

},

methods: {
    // 初始化地图
    initMap() {
      this.map = new AMap.Map(this.id, {
        center: this.setCenter,
        zoom: this.zoomSize,
        resizeEnable: true,
        mapStyle: 'amap://styles/0eaad232f61a2341504ad172e308f464',
      })

      this.map.on('click', () => {
        this.reSetMap()
      })

      this.map.on('zoomend', () => {
        this.refresh()
      })

      this.map.on('complete', () => {
        this.$emit('checkId') //检查页面是否路由传参获取车辆详情
        // 初始化信息窗体
        this.infoWindow = new AMap.InfoWindow({
          anchor: 'center-center',
          // isCustom: true,
          isCustom: true,
          offset: new AMap.Pixel(0, -10),
        })
      })
    },

    // 地图车辆标注
    setCarMarker(v) {
      // console.log(v)
      let marker = new AMap.Marker({
        map: this.map,
        position: new AMap.LngLat(v.lng, v.lat),
        // bubble: true,
        icon: new AMap.Icon({
          // 图标尺寸
          size:  new AMap.Size(32, 32),
          // 设置点标记中显示的图标
          image: v.vehicleStatus === '1' ? outIcon : inIcon,
          // 图标所用图片大小
          imageSize: new AMap.Size(32, 32),
          // 图标取图偏移量
          imageOffset: new AMap.Pixel(0, 0),
        }),
        offset: new AMap.Pixel(-16, -13),
        extData: v,
        topWhenClick: true, // 鼠标点击时marker是否置顶
      })
      marker.name = 'carMarker' + v.vehicleId
      // 设置鼠标划过点标记显示的文字提示
      marker.setTitle(v.plate)
      return marker
    },

    // 更新车辆数据
    updateCar(data) {

      // console.log(data)

      // 30s刷新的时候，分3种情况判断
      // 1、地图上有的车，获取到新数据里面也有的车，要更新地图上的车；
      // 2、地图上有的车，获取到新数据里面没有的车，要删除地图上的车；
      // 3、获取到的新数据里面有的车，地图上的没有的车，要添加这些车到地图上。

      let allOverlays = this.map.getAllOverlays()
      // 覆盖物车和新数据车对比，含有的车辆直接更新数据
      data.map((v) => {

        // 覆盖物里面有，新数据里面有的车，要更新
        allOverlays.map((item) => {
          if (item.name) {
            if (item.name.indexOf('carMarker') != -1) {
              let idd = item.name.replace(/[^0-9]/gi, '')
              if (v.vehicleId == idd) {
                this.updateCarInfo(item, v)
              }
            }
          }
        })
      })

      // 覆盖物里面有，新数据里面没有的车，要删除
      let oldcarArr = allOverlays.filter((item) => {
        if (item.name) {
          if (item.name.indexOf('carMarker') != -1) {
            let idd = item.name.replace(/[^0-9]/gi, '')
            return !data.some((ele) => ele.vehicleId == idd)
          }
        }
      })
      if (oldcarArr.length > 0) {
        oldcarArr.map((o) => {
          o.setMap(null)
        })
      }

      // 新数据里面有的车，覆盖物里面没有，要添加
      let newcarArr = this.compareArr(data, allOverlays)
      if (newcarArr.length > 0) {
        // 所有车
        newcarArr.map((cc) => {
          this.getCarMarker([cc])
        })
      }
    },

    // 30s更新地图已有车辆位置、方向和图标信息
    updateCarInfo(item, v) {
      item.setPosition(new AMap.LngLat(v.lng, v.lat))
      // 在更新标注位置的时候，同时更新其他信息extData，防止点击其他车辆的时候标签位置还是原来车辆的位置（因为车位置会变）
      item.setExtData(v)
      item.setIcon(
        new AMap.Icon({
          size:  new AMap.Size(32, 32),
          image: v.vehicleStatus === '1' ? outIcon : inIcon,
          imageSize: new AMap.Size(32, 32),
        })
      )
    },

    // 取出不同data里面有，allOverlays里面没有,要添加
    compareArr(data, allOverlays) {
      var result = []
      for (var i = 0; i < data.length; i++) {
        var obj = data[i]
        var num = obj.vehicleId
        var flag = false
        for (var j = 0; j < allOverlays.length; j++) {
          if (allOverlays[j].name) {
            // 首页的所有车，或者，点击一辆车之后的其他车
            if (allOverlays[j].name.indexOf('carMarker') != -1) {
              let idd = allOverlays[j].name.replace(/[^0-9]/gi, '')
              var n = idd
              if (n == num) {
                flag = true
                break
              }
            }
          }
        }

        if (!flag) {
          result.push(obj)
        }

      }
      // console.log(result)
      return result

    }