地图聚合点展示

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, // 自定义非聚合点样式
      });
    },
相关推荐
IT_陈寒17 小时前
5个Java 21新特性实战技巧,让你的代码性能飙升200%!
前端·人工智能·后端
咖啡の猫17 小时前
Vue内置指令与自定义指令
前端·javascript·vue.js
昔人'17 小时前
使用css `focus-visible` 改善用户体验
前端·css·ux
前端双越老师17 小时前
译: 构建高效 AI Agent 智能体
前端·node.js·agent
艾小码17 小时前
告别数据混乱!掌握JSON与内置对象,让你的JS代码更专业
前端·javascript
liangshanbo12151 天前
写好 React useEffect 的终极指南
前端·javascript·react.js
哆啦A梦15881 天前
搜索页面布局
前端·vue.js·node.js
_院长大人_1 天前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
SevgiliD1 天前
el-table中控制单列内容多行超出省略及tooltip
javascript·vue.js·elementui