uniapp mini program map development, Android and iOS compatibility issues

1. When the map component clicks multiple markers, how to hide the previous bubble and only display the currently clicked one?

When using the map that comes with the mini program (Tencent Maps), when there are multiple markers, when you click on the marker, the previous bubble cannot be hidden under the Android version. The iOS system is normal.

I solved it here. Solution: Traverse the current markers array based on the id passed by the @markertap callback when clicked. Change the display mode of the currently displayed marker to ALWAYS, and the others to BYCLICK or NONE. Of course, you can determine whether the current system is iOS and execute this logic for the Android system.

示例代码：
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.Set a centered picture

<!-- 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. Map movement refresh marker (marker)

Normally speaking, our needs may need to display some marker lists (markers) on the map, but our marker list may need to obtain the attached marker list (markers) in real time based on the current location, then we You can bind an event to him (the event of map movement change) @regionchange="mapChange"
Note: The position here is the center point position, that is, the latest position returned after you move the map is The current map center location. So cooperate with 2 to display the centered picture, a reference position

//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) 
	}
}