微信小程序使用unia-pp地图开发

Question

微信小程序用uni-app开发,使用的高德的key,地图上marker标点过多页面卡顿,怎么解决

Answer 1

复制代码
<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>

换成你自己的数据