weixin_49601284 2021-05-17 18:04 采纳率: 25%
浏览 45
已采纳

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

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

  • 写回答

3条回答 默认 最新

  • technologist_30 2021-05-17 20:56
    关注
    复制代码
    <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>

    换成你自己的数据

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥30 电脑误删了手机的照片怎么恢复?
  • ¥15 (标签-python|关键词-char)
  • ¥15 python+selenium,在新增时弹出了一个输入框
  • ¥15 苹果验机结果的api接口哪里有??单次调用1毛钱及以下。
  • ¥20 学生成绩管理系统设计
  • ¥15 来一个cc穿盾脚本开发者
  • ¥15 CST2023安装报错
  • ¥15 使用diffusionbert生成文字 结果是PAD和UNK怎么办
  • ¥15 有人懂怎么做大模型的客服系统吗?卡住了卡住了
  • ¥20 firefly-rk3399上启动卡住了