uni.createMapContext uniapp小程序 地图放大图标 动态切换图标

<map id="map" class="map" style="width: 100%;height: 100vh;" :show-location="true" :latitude="latitude":longitude="longitude" @regionchange="regionchange" :markers="markers" @markertap="markertap"></map>

注意组件绑定的这个参数 :markers=“markers”

	// 点击标识时触发 地图监听
	markertap(e) {
    
    
		const markerId = e.markerId
		this.getDetails(this.siteData[markerId].id)
		this.markers.forEach(p => {
    
     // 点击放大地图icon
			if(p.id == markerId) {
    
    
				this.markers[p.id].width = 90
				this.markers[p.id].height = 90
			}else {
    
    
				this.markers[p.id].width = 70
				this.markers[p.id].height = 70
			}
		})
		this.show = true
	},
	// 渲染地图icon
	addMapicon() {
    
    
		console.log(this.markers)
		this._mapContext.addMarkers({
    
    
			markers: this.markers, // 组件绑定的值
			clear: false,
			complete(res) {
    
    
				console.log('addMarkers', res)
			}
		})
	},

总结:如果你看不懂我写的什么 我建议你先去看官方的示例
https://uniapp.dcloud.net.cn/api/location/map.html#createmapcontext

猜你喜欢

转载自blog.csdn.net/qq_47247479/article/details/127054911