Rangyf
Rangyf
  • 发布:2021-01-21 00:49
  • 更新:5 天前
  • 阅读:1664

uniapp map组件iOS APP nvue@updated @regionchange事件的触发机制

分类:nvue

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端还挺特殊的

  1. 必须等@updated事件触发过之后,@regionchange事件才可以被触发,不然在地图上拖动完全不会触发@regionchange事件;也就是:一旦成功触发过@updated事件,@regionchange事件就可以完全正常监听了
  2. 然而奇怪的就是@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以上,其他情况也许会略有不同

1 关注 分享
2***@qq.com

要回复文章请先登录注册

8***@qq.com

8***@qq.com

回复 2***@qq.com :
你好,我也遇到了同样的问题,请问你是怎么解决的
5 天前
2***@qq.com

2***@qq.com

您好我是安卓app的开发,使用到这个方法但是e.type一直返回的都是regionchange。用了您的方法也没走通。请问怎么解决
2022-11-18 17:11
赵文龙

赵文龙

ios @regionchange 这个事件只有按下和松开会触发,怎么按下移动时也触发呢?
2022-10-14 16:00
ddpapa

ddpapa

既然支持,就不能把文档写好,就扔个方法
2021-11-26 17:00
Rangyf

Rangyf (作者)

多次验证后改scale也不是百试百灵,和手机性能也有关系,测试的iPhone 7就相对更容易无效,iPhone Xs则相对容易有效
2021-02-02 16:14