高德地图海量点标记实现车主分布显示-优快云博客

本文链接：https://blog.youkuaiyun.com/Pgy121/article/details/111504553

本文介绍了一个基于Web的地图应用，该应用能够根据城市代码获取车辆位置数据，并在地图上以图标形式展示这些车辆的位置。通过定时刷新，确保了地图上显示的数据保持最新状态。

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

在这里插入图片描述

<template>
  <div class="ordinary-distribution">
    <div class="map-wrap">
      <div class="map-content" id="map-content" ref="mapElement"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'distributionsCar',
  data() {
    return {
      map: null,
      lng: this.$route.query.lng,
      lat: this.$route.query.lat,
      areaCode: this.$route.query.areaCode,
      mass: null,
      creatMarks: Object,
      carImg: require('../../assets/images/car.png'),
      op: {
        driverLocalByCityCode: 'CityCode'
      },
      timer: null
    };
  },
  watch: {},
  computed: {},
  methods: {
    async setMark(flag) {
      this.timeOut();
      let { data, code } = await this.marker();
      clearTimeout(this.timer);
      if (code == 1) {
        let marksDatas = JSON.parse(data).listVo;
        if (marksDatas.length !== 0 && marksDatas !== null) {
          this.creatMarks = marksDatas.map((item) => {
            let newArr = [];
            newArr.push(
              Object.assign({
                lnglat: [item.gbPoint.lon, item.gbPoint.lat]
              })
            );
            return newArr;
          });
          this.creatMarks = this.creatMarks.flat();
          if (flag) {
            this.mass.clear(this.map);
          }
          this.mass = new AMap.MassMarks(this.creatMarks, {
            opacity: 0.8,
            zIndex: 111,
            // cursor: 'pointer',
            style: [
              {
                url: this.carImg,
                anchor: new AMap.Pixel(50, 50),
                size: new AMap.Size(50, 50)
              }
            ]
          });
          this.mass.setMap(this.map);
        }
      }
      setTimeout(() => {
        this.setMark(true);
      }, 5000);
    },
    marker() {
      let marksDatas, opt;
      opt = {
        data: JSON.stringify({
          cityCode: this.areaCode
        }),
        op: this.op.driverLocalByCityCode
      };
      return this.$axios('***********', opt);
    },
    timeOut() {
      this.timer = setTimeout(() => {
        location.reload();
      }, 15000);
    }
  },
  mounted() {
    let that = this;
    this.map = new AMap.Map('map-content', {
      zoom: 13,
      center: [this.lng, this.lat],
      mapStyle: 'amap://styles/***********************'
    });
    this.setMark(false);
  },
  activated() {},
  deactivated() {},
  destroyed() {
    // document.querySelector('#ws-watermark-background').style.display = 'block';
  }
};
</script>
<style>
</style>
<style lang="scss">
html,
body {
  background: rgba($color: #333, $alpha: 0.5);
}
.ordinary-distribution {
  position: fixed;
  height: 100%;
  width: 100%;
  .map-wrap {
    height: 100%;
    .map-content {
      height: 100%;
    }
  }
}
</style>