MAP组件文档上确实对于@updated @regionchange在APP及APP-NVUE的支持情况没有写（也就是应该不支持），但实际其实是支持的，并且在安卓端支持得蛮好的，这里就不详细讨论安卓的部分了。
iOS那边就比较怪异了，目前测下来，这俩事件也确实都是可以触发的。
btw这边先提一句：安卓和iOS两边regionchange事件的参数是有略微差别的，安卓那边来获取拖拽起始和结束是这样：
onRegionChange(e) {
swich(e.type) {
case 'begin':
//处理起始事件
case 'end':
//处理结束事件
}
}
而iOS这边是这样：
onRegionChange(e) {
swich(e.detail.type) {
case 'begin':
//处理起始事件
case 'end':
//处理结束事件
}
}
扯回主要想讲的怪异行为，也就是这俩事件的触发条件在iOS端还挺特殊的
- 必须等@updated事件触发过之后，@regionchange事件才可以被触发，不然在地图上拖动完全不会触发@regionchange事件；也就是：一旦成功触发过@updated事件，@regionchange事件就可以完全正常监听了
- 然而奇怪的就是@updated事件并不是次次都能在刚进入页面加载完地图后就自动触发
2.1. 目前的尝试1：在地图显示出来之后快速拖动地图使地图移动较远距离（慢慢拖动就完全没用，应该是快速移动到一片地图完全没有预载好的区块导致重新渲染）可以触发@updated
2.2. 目前的尝试2：在地图显示出来之后缩放地图（大概是scale值发生了变化，慢慢缩放也可以，通过代码修改scale值也可以）也可以触发@updated
2.3. 目前的尝试3：在地图显示出来之后通过代码改变地图中心到很远的地方并不能触发与2.1相同的结果（通过setTimeout延迟触发也不行，通过mapContext.moveToLocation和直接改变map组件的latitude和longitude都不行）
总结：要在iOS的nvue中完美使用map组件的@regionchange需要先成功触发@updated，可以参考以下代码：
<map :id="mapId" :latitude="latitude" :longitude="longitude" :scale="mapScale"
@regionchange="onMapRegionChange" @updated="onMapFinish" />
data: function() {
return {
// 深圳的经纬度
latitude: 22.547,
longitude: 114.085947,
mapId: 'whatever',
mapScale: 17,
}
},
methods: {
onMapRegionChange: function(e) {
let type = '';
const { platform } = uni.getSystemInfoSync();
switch (platform) {
case 'android':
type = e.type;
break;
case 'ios':
type = e.detail.type;
break;
}
if (type === 'begin') {
// 处理拖拽开始时的逻辑
}
else if (type === 'end') {
// 处理拖拽结束时的逻辑
}
},
onMapFinish: function() {
console.log('现在可以开始监听@regionchange了');
},
},
onLoad: function() {
uni.showLoading();
uni.getLocation({
type: 'gcj02',
success: async (data) => {
uni.hideLoading();
console.log('getLocation', data);
this.mapScale = 18;
this.latitude = data.latitude;
this.longitude = data.longitude;
},
fail: (e) => {
uni.hideLoading();
console.log('getLocation fail', e);
this.mapScale = 18;
},
});
}
P.S. 仅代表HBuilderX 3.0.5，iOS 14以上，其他情况也许会略有不同
这种语法 wxss 也不支持.... 这里不是 CSS 类名修改可以避免的，就只能去
