uni-app 地图自定义聚合样式不生效

开发环境	版本号	项目创建方式
Mac	macOS 14.1.1 (23B81)	HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

HBuilderX类型：正式

HBuilderX版本号：3.98

手机系统：Android

手机系统版本号：Android 10

手机厂商：华为

手机机型：nova 7 5G

页面类型：nvue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

示例代码：

initMap() {
    let that = this
    this.map.mapObj = uni.createMapContext("map", this);
    //仅调用初始化，才会触发 on("markerClusterCreate", (e) => {})
    that.map.mapObj.initMarkerCluster({
        enableDefaultStyle: false,
        zoomOnClick: true,
        gridSize: 10,
        complete(res) {
            console.log('initMarkerCluster', res)
        }
    });
    console.log("test")
    that.map.mapObj.on("markerClusterCreate", (res) => {
        let clusterMarkers = []
        const clusters = res.clusters // 新产生的聚合簇
        clusters.forEach((cluster, index) => {
            const {
                center, // 聚合点的经纬度数组
                clusterId, // 聚合簇id
                markerIds // 已经聚合了的标记点id数组
            } = cluster
            var iconPath = '/static/images/map/blue.png'
            if (that.markerHasRed(markerIds)) {
                iconPath = '/static/images/map/red.png'
            } else if (that.markerHasYellow(markerIds)) {
                iconPath = '/static/images/map/yellow-2.png'
            }
            console.log(center)
            console.log(markerIds)
            console.log(iconPath)
            let clusterObj = {
                clusterId, //必须
                ...center,
                width: 30,
                height: 30,
                iconPath: iconPath,
                label: { // 定制聚合簇样式
                    content: markerIds.length + '',
                    fontSize: 11,
                    width: 40,
                    height: 20,
                    color: "#000000",
                    bgColor: '#ffffff',
                    borderWidth: 1,
                    borderColor: "#aaa",
                    borderRadius: 5,
                    textAlign: 'center',
                    anchorX: -21,
                    anchorY: -50,
                }
            }
            clusterMarkers.push(clusterObj)
        })
        // 添加聚合簇
        that.map.mapObj.addMarkers({
            markers: clusterMarkers,
            clear: false, //是否先清空地图上所有的marker
            complete(res) {
                console.log('addMarkers', res)
            }
        })
    });
    that.map.mapObj.on('markerClusterClick', (res) => {
        console.log("markerClusterClick", res);
    })
}

gougou168 1楼•17 天前

在使用 uni-app 开发时，如果你遇到了地图自定义聚合样式不生效的问题，可以按照以下步骤进行排查和解决：

1. 确认地图组件和版本

地图组件：确保你使用的是支持聚合功能的组件，如 map 组件。
版本：检查 uni-app 和地图 SDK 的版本，确保它们支持自定义聚合样式。

2. 检查聚合样式配置

在 map 组件中，聚合样式通常通过 marker 的 cluster 属性配置。确保以下几点：

cluster 属性已正确配置，并且 markers 中有足够的点触发聚合。
自定义样式（如 iconPath、width、height）是否正确设置。

示例代码：

<map
  id="map"
  style="width: 100%; height: 100%;"
  :latitude="latitude"
  :longitude="longitude"
  :markers="markers"
  :include-points="includePoints"
  :clusters="clusters"
  @clusterclick="onClusterClick"
></map>

export default {
  data() {
    return {
      latitude: 39.909,
      longitude: 116.39742,
      markers: [
        {
          id: 1,
          latitude: 39.909,
          longitude: 116.39742,
          iconPath: '/static/marker.png',
          width: 30,
          height: 30,
          joinCluster: true, // 加入聚合
        },
        // 其他点
      ],
      clusters: [
        {
          id: 1,
          range: [3, 10], // 聚合范围
          iconPath: '/static/cluster.png', // 自定义聚合图标
          width: 40,
          height: 40,
        },
      ],
    };
  },
  methods: {
    onClusterClick(e) {
      console.log('聚合点点击事件', e);
    },
  },
};