高德地图海量点拖拽卡顿问题

首先感谢大佬的指点（大佬地址）：https://www.jianshu.com/p/812720b037cf

 

不多说直接上代码：粘贴就能用

 

在index.html  引入

 

    <!-- 高德地图 必须引用 -->
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=7e04772c16c565a3a2f1cfab417cc5e8&plugin=AMap.AutoComplete,AMap.PlaceSearch,AMap.MarkerClusterer,AMap.DistrictSearch"></script>
    <!-- 高德地图的测试经纬度数据   -->
    <script charset="utf-8" src="https://a.amap.com/jsapi_demos/static/data/community.js"></script>

 

<template>
  <div>
    <div id="container" class="map"></div>
  </div>
</template>
 

<script>
import axios from "axios";
export default {
  name: "qqMap",
  data() {
    return {
      map: {},
    };
  },
  mounted() {
    this.setMap(points);
 

  },
  methods: {
    setMap(data) {
      var map = new AMap.Map("container", {
        zoom: 11,
        center: [116.397428, 39.90923],
        zoomEnable: true, //是否可滚轮缩放
        dragEnable: true, //是否可拖拽
        resizeEnable: true, //是否监控地图容器尺寸变化
        keyboardEnable: false, //键盘控制'↑' '→' '↓' '←'
        doubleClickZoom: false, //地图是否可通过双击鼠标放大地图
      });
 

      /*根据健康状态展示不同的图片*/
      var style = [
        {
          //健康green01
          url: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3366321909,1868160535&fm=26&gp=0.jpg",
          anchor: new AMap.Pixel(0, 0),
          size: new AMap.Size(30, 30),
        },
        {
          //亚健康orange01
          url: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3366321909,1868160535&fm=26&gp=0.jpg",
          anchor: new AMap.Pixel(0, 0),
          size: new AMap.Size(30, 30),
        },
        {
          //疾病red01
          url: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3366321909,1868160535&fm=26&gp=0.jpg",
          anchor: new AMap.Pixel(0, 0),
          size: new AMap.Size(30, 30),
        },
        {
          //正在救助nowHelper
          url: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3366321909,1868160535&fm=26&gp=0.jpg",
          anchor: new AMap.Pixel(0, 0),
          size: new AMap.Size(30, 30),
        },
        {
          //未知状态blue01
          url: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3366321909,1868160535&fm=26&gp=0.jpg",
          anchor: new AMap.Pixel(0, 0),
          size: new AMap.Size(30, 30),
        },
      ];
      var locationData = []; //存放经纬度的数组
      var status = ""; //下表对应的样式
 

      for (var i = 0; i < data.length; i++) {
        var str2 = data[i].lnglat;
        // str2 = str2.split(","); //把经纬度转让数组
 

        /*判断健康状态*/
        if (data[i].district == "昌平区") {
          //健康
          status = 0; //根据下标来相对应样式 例如：健康对应style数组中的第0个样式
        } else if (data[i].district == "海淀区") {
          //亚健康
          status = 1;
        } else if (data[i].district == "朝阳区") {
          //疾病
          status = 2;
        } else if (data[i].district == "西城区") {
          //正在救助nowHelper
          status = 3;
        } else {
          //未知状态
          status = 4;
        }
        /*{lnglat: Array(2),  style: 2}  所需要的数据格式 */
        locationData.push({
          lnglat: str2,
          style: status, //对应的status相对应的样式style
        });
      }
      console.log(locationData)
      /* 大量点所对应的方法*/
      var mass = new AMap.MassMarks(locationData, {
        opacity: 0.8,
        zIndex: 111,
        cursor: "pointer",
        style: style,
      });
      var marker = new AMap.Marker({ content: " ", map: map });
      mass.on("mouseover", function (e) {
        marker.setPosition(e.data.lnglat); //用户相对应的经纬度
        marker.setLabel({ content: e.data.name }); //用户相对应的名字
      });
      mass.setMap(map);
    }
  }
};
</script>
 

<style scoped>
.map {
   100%;
  height: 900px;
}
</style>

 

大佬帖子的地址：https://www.jianshu.com/p/812720b037cf