uniapp 地图聚合自定义样式

定义自己的聚合样式,想将背景色变成了绿色,打开项目后发现自定义样式没有发生任何变化

uniapp 地图聚合自定义样式_第1张图片

查看了一下官网的教程

uniapp 地图聚合自定义样式_第2张图片

发现 自定义的聚合样式写在label中,而joinCluster 要写在 label 外才可以使用自定义的

修改后的代码:

methods中的方法

createMap(){
			const _this = this
			_this.map = uni.createMapContext('nmap',this)
			_this.map.initMarkerCluster({
				enableDefaultStyle:false,
				zoomOnClick:true,
				gridSize:60,
				success(res){
					console.log(2222222222222,res)
				}
			})
			// 监听聚合事件
			_this.map.on('markerClusterCreate',res=>{
				console.log(res)
				const clusters = res
				const markers = clusters.map(cluster => {
					const {
						center,
						clusterId,
						markerIds
					} = cluster
					return {
						...center,
						width: 0,
						height: 0,
						clusterId, 
						joinCluster: true,      //核心代码,没有这个自定义样式就不会生效
						label: {
							content: markerIds.length + '',  
                            fontSize: 16,  
                            color: '#fff',  
                            width: 50,  
                            height: 50,  
                            bgColor: '#00868C',  
                            borderRadius: 25,  
                            textAlign: 'center',  
                            anchorX: -25,  
                            anchorY: -50,  
						}
					}
				})
				_this.map.addMarkers({
					markers,
					clear: false,
					complete(res) {
						console.log('clusterCreate addMarkers', res)
					}
				})
				_this.markers.concat(markers)
				console.log(markers)
			})
		},

uniapp 地图聚合自定义样式_第3张图片 

 

 

你可能感兴趣的:(uniapp地图聚合,uniapp,css,前端,javascript,vue.js)