地图聚合点展示

javascript 复制代码
let that= this
 var points = [
        { lnglat: ["120.556168", "36.205298"] },
        { lnglat: ["120.556268", "36.205287"] },
        { lnglat: ["120.553368", "36.205276"] },
        { lnglat: ["120.626468", "36.205265"] },
        { lnglat: ["120.656568", "36.205254"] },
        { lnglat: ["120.556668", "36.205243"] },
      ];
      var count = points.length;
      // 自定义聚合点样式
      var _renderClusterMarker = function (context) {
        // 聚合中点个数
        var clusterCount = context.count;
        var div = document.createElement("div");
        let bgColor = "232, 64, 51";
        div.style.backgroundColor = "rgba(" + bgColor + ",.5)";
        var size = Math.round(25 + Math.pow(clusterCount / count, 1 / 5) * 40);
        div.style.width = div.style.height = size + "px";
        div.style.border = "solid 1px rgba(" + bgColor + ",1)";
        div.style.borderRadius = size / 2 + "px";
        div.innerHTML = context.count;
        div.style.lineHeight = size + "px";
        div.style.color = "#ffffff";
        div.style.fontSize = "12px";
        div.style.textAlign = "center";
        context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
        context.marker.setContent(div);
      };
      // 自定义非聚合点样式
      var _renderMarker = function (context) {
        let arr = [];
        arr.push({
          longitude: context.data[0].lnglat.lng,
          latitude: context.data[0].lnglat.lat,
        });
        var content =
          '<div class="wrap-icon" style="">' +
          '<div class="icon"><i class="iconfont icon-feidaoluyidongyuan"></i></div>' +
          '<div class="sanjiao"></div>' +
          "</div>";
        var offset = new AMap.Pixel(-9, -9);
        context.marker.setContent(content);
        context.marker.setOffset(offset);
      };
      that.addCluster(_renderClusterMarker, _renderMarker, points);
javascript 复制代码
 // 聚合
    addCluster(_renderClusterMarker, _renderMarker, points) {
      if (this.cluster) {
        this.cluster.setMap(null);
      }
      //自定义图标
      var sts = [
        {
          // url: "//a.amap.com/jsapi_demos/static/images/blue.png",
          size: new AMap.Size(32, 32),
          offset: new AMap.Pixel(-16, -16),
        },
      ];
      this.cluster = new AMap.MarkerCluster(this.myMap, points, {
        styles: sts,
        gridSize: 60,
        renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
        renderMarker: _renderMarker, // 自定义非聚合点样式
      });
    },
相关推荐
李白的天不白7 小时前
pnpm
前端
jay神7 小时前
基于 Python + Flask + Vue 的校内求职互助平台
前端·vue.js·后端·python·flask·毕业设计
2501_940041747 小时前
从跑酷到实时联机:5个能直接用的Web游戏开发需求
前端
RANxy7 小时前
零基础全栈 React 入门(三):状态管理与事件处理
前端
Csvn7 小时前
前端调试技巧
前端
右耳朵猫AI8 小时前
React技术周刊 2026年第20周
前端·react.js·前端框架
问心无愧05138 小时前
ctf show web入门58
前端·笔记
七夜zippoe8 小时前
OpenClaw Canvas 执行:JavaScript 注入实战
开发语言·javascript·udp·canvas·openclaw
zzx2006__8 小时前
JavaScript最终考核
开发语言·前端·javascript
用户4445543654268 小时前
Android跑马灯控件
前端