uniapp小程序自定义聚合点

注：

1.默认的聚合点可以点击自动展示子级点位，但是自定义的聚合点在ios上无法触发markerClusterClick的监听，至今未解决，不知啥原因

2.ios和安卓展示的点位样式还有有差别

源码附上

<template><view class="marker-map"><map id="mapId" style="width: 100%; height:1342rpx ;" :latitude="latitude" :longitude="longitude"show-location show-scale :scale="zoom" @regionchange="regionchange" @updated="update" @callouttap='callouttap'></map><view class="layer flex-column align-end"><view class="cur-location justify-center align-center" @click="backCenter"><image :src="imgConf.position" mode="" style="width:60%;height: 60%;"></image></view><view class="list"><u-transition :show="showMarkerListPop" mode="fade-up"><mapMarkerList @onclose="showMarkerListPop=false" /></u-transition></view></view></view>
</template><script>import mapMarkerList from './components/mapMarkerList.vue'import imgConf from '@/utils/imgConf.js'export default {components: {mapMarkerList},data() {return {imgConf,longitude: 104.04311,latitude: 30.64242,markers: [], // 使用 marker点击事件 需要填写idfixedHeight: 60,zoom: 16,showMarkerListPop: false}},created() {this.mapContext = uni.createMapContext("mapId", this);console.log("this.mapContext", this.mapContext);// 使用默认聚合效果时可注释下一句this.bindEvent()this.getDotList();},methods: {bindEvent() {this.mapContext.initMarkerCluster({enableDefaultStyle: false,zoomOnClick: true,gridSize: 100,complete(res) {console.log('initMarkerCluster', res)}});// enableDefaultStyle 为 true 时不会触发该事件this.mapContext.on('markerClusterCreate', res => {const clusters = res.clustersconst markers = clusters.map(cluster => {const {center,clusterId,markerIds} = clusterreturn {...center,width: 1,height: 1,clusterId, // 必须iconPath: '',label: {content: '盛世年华' + "(" + "2" + "套)" + '\n' + '12' + '元起',color: "#ffffff",fontSize: 11,borderRadius: 8,bgColor: "#0090FF",padding: 10,textAlign: 'center',anchorX: 0,anchorY: -56,}// callout: {// 	content: '盛世年华' + "(" + "2" + "套)" + '\n' + '12' + '元起',// 	color: "#ffffff",// 	fontSize: 11,// 	borderRadius: 8,// 	bgColor: "#0090FF",// 	padding: 10,// 	textAlign: 'center',// 	display: 'ALWAYS',// },}})this.mapContext.addMarkers({markers,clear: false,complete(res) {console.log('clusterCreate addMarkers', res)}})})this.mapContext.on("markerClusterClick", (ClusterInfo) => {console.log("点击聚合点", ClusterInfo); //[id1,id2]});},// 获取所有点位/async getDotList(params) {// const res = await getDot(params)const resPosition = [{longitude: 113.324520,latitude: 23.099994,title: '盛世年华1',num: 1,price: 35500},{longitude: 102.04320,latitude: 31.64242,title: '盛世年华2',num: 1,price: 35500},{longitude: 102.04313,latitude: 30.64242,title: '盛世年华3',num: 1,price: 15500},{longitude: 113.326520,latitude: 31.64242,title: '盛世年华4',num: 3,price: 25500},]const markers = []resPosition.forEach((p, i) => {markers.push(Object.assign({}, {id: i + 1,iconPath: '',joinCluster: true,width: 2,height: 2,callout: {content: p.title + "(" + p.num + "套)" + '\n' + p.price + '元起',color: "#ffffff",fontSize: 11,borderRadius: 8,bgColor: "#0090FF",padding: 10,textAlign: 'center',display: 'ALWAYS',},}, p))})this.markers = JSON.parse(JSON.stringify(markers))this.mapContext.addMarkers({markers: this.markers,clear: false,complete(res) {console.log('addMarkers', res)}})// .map((item, index) => {// 	if (item.lnglat === '') {// 		return undefined// 	}// 	var location = item.x.split(",");// 	let iconPath = ''// 	let label = item.name.length > 20 ? item.name.substr(0, 18) + '...' : item.name;// 	label = label.length > 10 ? label.substr(0, 10) + '\n' + label.substr(10) : label;// 	return {// 		id: index,// 		longitude: Number(location[0]),// 		latitude: Number(location[1]),// 		iconPath,// 		joinCluster: this.zoom > 18 ? false : true,// 		width: 50,// 		height: 60,// 		name: item.name,// 		label: {// 			content: label,// 			anchorX: 20,// 			anchorY: -45,// 			color: '#333',// 			fontSize: 14// 		}// 	}// }).filter(i => i !== undefined)console.log('markers', this.markers)if (this.markers.length === 0) {uni.showToast({title: '暂无相关点位信息',icon: "none"})this.longitude = 92.066757this.latitude = 31.473608this.zoom = 16return}// })},// 点击标记点callouttap(e) {this.showMarkerListPop = true// 根据markerid查找console.log('点击标记点E', e) //e.markerId},regionchange() {// this.mapContext.getScale({// 	success: (res) => {// 		this.zoom = res.scale// 	}// })},update() {console.log('渲染更新完成') //e.markerId},// 定位到当前位置backCenter() {uni.getLocation({type: 'gcj02',success: (res) => {if (res.longitude && res.latitude) {this.latitude = Number(res.latitude)this.longitude = Number(res.longitude)this.zoom = 16.01 // 必须要有层级的变化，下面的方法才能生效this.mapContext.moveToLocation({longitude: this.longitude,latitude: this.latitude,success: (res) => {this.zoom = 16.03},fail: (info) => {console.log(info)}})} else {uni.showToast({title: '无法获取当前定位'})}},fail(err) {uni.showToast({title: '无法获取当前定位'})}});},}}
</script><style lang="scss" scoped>.marker-map {.layer {position: fixed;z-index: 999;width: 100%;right: 0;bottom: 0;}.cur-location {width: 86rpx;height: 86rpx;background: #FFFFFF;box-shadow: 0rpx 0rpx 8rpx 1rpx rgba(0, 144, 255, 0.15);border-radius: 20rpx 20rpx 20rpx 20rpx;margin-right: 30rpx;margin-bottom: 50rpx;}.list {width: 100%;height: 100%;}}
</style>