基础库2.19.1
ios 10
微信版本 8.0.16
代码片段:https://developers.weixin.qq.com/s/Qx3hiMm77RvU
官方开发文档里map的自定义聚合簇是这样写的:
============================================
示例代码
需注意的是:
- 地图上的 marker 分为普通的 marker 与参与聚合的 marker,参与聚合时需指定属性 joinCluster 为 true;
- 自定义聚合簇样式时,同样通过 MapContext.addMarkers 进行绘制,此时需携带 clusterId。
=============================================
上面的红色部分官方并没有描述清楚怎么携带,我试了几种方式都无法正确自定义聚合样式。请官方检查下是否有错或者补充下开发文档,多谢多谢。
问题还没搞定,官方有人吗?
参考下我写的这部分代码,来实现聚合簇
this.mapCtx = wx.createMapContext('map') this.clusterFunc()
首先获取map上下文
/** * 点聚合 */ clusterFunc() { var that = this this.mapCtx.initMarkerCluster({ enableDefaultStyle: false,//启用默认的聚合样式 zoomOnClick: true,//点击已经聚合的标记点时是否实现聚合分离 gridSize: 200,//聚合算法的可聚合距离,即距离小于该值的点会聚合至一起,以像素为单位 complete(res) { console.log('点聚合初始化', res) } }) this.mapCtx.on('markerClusterCreate', res => { console.log('聚合触发:', res.clusters) that.changeOnCluster(res.clusters) var clusters = res.clusters var markers = clusters.map(cluster => { const { center, clusterId, markerIds } = cluster return { ...center, canshow: true, width: 20, height: 20, clusterId, // 必须 iconPath: '/images/place4.png', label: { content: '这里活跃着' + markerIds.length + '位朋友', color: '#3CB371', fontSize: 12, borderRadius: 30, borderWidth: 1, borderColor: '#dddddd', bgColor: '#ffffffbb', padding: 10, anchorX: -60, anchorY: -60, } } }) this.mapCtx.addMarkers({ markers, clear: false,//只改动了新增的聚合点,所以不用删除其他点 complete(res) { console.log('clusterCreate addMarkers', res) } }) }) },
然后再往地图里面推送markers
markers.push( { iconPath: '/images/place4.png', id: o, joinCluster: true,//是否参与聚合 latitude: alumnusList[o].position.latitude, longitude: alumnusList[o].position.longitude, width: 20, height: 20, name: alumnusList[o].name, gender: alumnusList[o].gender, customCallout: { display: 'ALWAYS' } } )
最后这步需要把参与聚合的点,push的时候写为joinCluster为true
https://developers.weixin.qq.com/s/TaK9LMmO7XvR