uniapp 小程序地图开发,Android与iOS兼容问题

1.map组件点击多个标记点marker,怎样隐藏上一个气泡,只显示当前点击的?

使用小程序自带地图(腾讯地图),当有多个marker时,点击marker时,在Android版本下,无法隐藏上一个气泡。iOS系统正常。

我这边解决了。方案:根据点击时@markertap回调传递过来的id,进行遍历当前markers数组。当前显示的marker修改他的显示模式为ALWAYS,其他则为BYCLICK或者NONE。当然你可以判断当前是否是iOS系统,针对Android系统执行这套逻辑

示例代码:
updateMarker(markerId) {
	//此处的markerId是从 @markertap 回调中得来的:e.mp.detail.markerId。可以参考下方的markerObj.id,是同一个值的概念
	for (let i = 0; i < this.markers.length; i++) {
		if (this.markers[i].id != markerId) {
			this.markers[i].callout.display = 'BYCLICK'//此处也可以设置为NONE
			//当然这里还可以更新显示文本,图片等。参考:https://uniapp.dcloud.io/component/map.html#app%E5%B9%B3%E5%8F%B0%E5%9C%B0%E5%9B%BE%E6%9C%8D%E5%8A%A1%E5%95%86%E5%B7%AE%E5%BC%82
			this.markers[i].iconPath = xxx
		} else {
			this.markers[i].callout.display = 'ALWAYS'
		}
	}
}

2.设置居中图片

在这里插入图片描述

<!-- map组件里写-->
<cover-image src="xxxx" class="centerImg"> </cover-image>

<!-- centerImg样式-->
.centerImg {
		position: absolute;
		width: 33rpx;
		height: 52rpx;
		top: 50%;
		margin-top: -26rpx;
		left: 50%;
		margin-left: -16rpx;
}

3.地图移动刷新marker(标记)

正常来讲,我们的需求可能需要在地图上显示某些标记列表(markers),但是我们的标记列表可能需要根据当前的位置实时取获取附件的标记列表(markers),那么我们可以给他绑定一个事件(地图移动改变的事件)@regiοnchange=“mapChange”
注意:此处的位置为中心点位置,即你移动地图后返回最新的位置是当前地图中心位置。所以配合2显示居中图片,一个参考的位置
在这里插入图片描述

//UI部分
<map id="map" @tap="mapTap" @markertap="markertap" :markers="markers" class="mapBox" :callout="false"
			:controls="controls" @regionchange="mapChange" :latitude="latitude" :longitude="longitude"
			:show-location="true">
</map>

//逻辑部分
mapChange(e) {
				console.log('地图变化', e)
				if (e.type == 'end') {
					//方式1:通过这个来获取中心经纬度
					/*this.map.getCenterLocation({
						success:(res)=>{
							console.log('当前中心经纬度:',res.latitude,res.longitude)
							// this.latitude = res.latitude
							// this.longitude = res.longitude
							// this.getDeviceList(that.latitude, that.longitude);
						}
					})*/
					//方式2:
					console.log('当前中心经纬度:', e.detail.centerLocation.latitude, e.detail.centerLocation.longitude)
					this.getDeviceList(e.detail.centerLocation.latitude, e.detail.centerLocation.longitude);
				}
},
getDeviceList(latitude,longitude){
	//因为this.markers是动态绑定的,值变化了,页面也会刷新
	//我们自己根据返回的数据data创建出marker数据
	let data = request(xxxxxxx)
	this.markers = []
	for (let i in data) {
		let markerObj = {};
		//id很重要,更新标记靠他
		markerObj.id = data[i].id	
		//设置显示文本,当点击标记时会显示
		markerObj.title = data[i].xxx
		//设置显示的坐标
		markerObj.latitude = data[i].latitude
		markerObj.longitude = data[i].longitude
		//设置气泡后,markerObj.title无效。不设置气泡则显示markerObj.title的值。当点击标记时会显示
		markerObj.callout = {
				content: data[i].xx
				padding: 10,
				display: 'BYCLICK',//'BYCLICK':点击显示; 'ALWAYS':常显
				color: '#FF0000'
		}
		//可以设置标记的图片和显示大小
		markerObj.iconPath = xxx/current_position.png"
		markerObj.width = 30
		markerObj.height = 30
		
		//数组通过push触发数据监听,刷新界面
		this.markers.push(markerObj) 
	}
}

猜你喜欢

转载自blog.csdn.net/u014632228/article/details/123993136