高德地圖海量點拖拽卡頓問題

首先感謝大佬的指點（大佬地址）：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 {
  width: 100%;
  height: 900px;
}
</style>

 

 

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