uni-app 微信小程序中缩放地图后不会立即触发regionchange事件，要再拖动一下地图才可以

uni-app 微信小程序中缩放地图后不会立即触发regionchange事件，要再拖动一下地图才可以

开发环境 版本号 项目创建方式
Mac macOS Catalina 10.15.5 HBuilderX

示例代码：

<template>  
    <view>  
        <map id="map1" ref="map1" :controls="controls" scale="18" min-scale="16" max-scale="19"  
            :longitude="currentLocation.longitude" :latitude="currentLocation.latitude"  
            :show-location="showLocation" :show-compass="true"  
            :enable-poi="enablePoi" :enable-zoom="true" :enable-scroll="true"  
            :enable-traffic="false" :markers="markers"  
            :polyline="polyline" :circles="circles" :polygons="polygons" :include-points="includePoints"  
            @regionchange="onRegionChange">  
        </map>  
    </view>  
</template>  

<script>  
    export default {  
        methods: {  
            onRegionChange(e) {  
                console.log(JSON.stringify(e));  
            },  
        }  
    }  
</script>

操作步骤：

参考代码片段

预期结果：

缩放地图后在浏览器的开发者工具的console中立即打印日志

实际结果：

没有立即打印，需要拖动地图后才打印日志

bug描述：

如题


更多关于uni-app 微信小程序中缩放地图后不会立即触发regionchange事件，要再拖动一下地图才可以的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

用了一个变通的办法来检测缩放等级改变：
<template>
<view>
<map id="map1" ref="map1" :controls="controls" scale="18" min-scale="16" max-scale="19" :longitude="currentLocation.longitude" :latitude="currentLocation.latitude" :show-location="showLocation" :show-compass="true" :enable-poi="enablePoi" :enable-zoom="true" :enable-scroll="true" :enable-traffic="false" :markers="markers" :polyline="polyline" :circles="circles" :polygons="polygons" :include-points="includePoints">
</map>
</view>
</template>

<script> export default { data() { return { scale: null, intervalId: null } }, onShow() { // 定时检测缩放等级是否改变 this.intervalId = setInterval(() => { // 以下代码用来获取地图的缩放等级 MapUtils.getMapScale().then((res) => { if (this.scale != res) { this.scale = res; // 模拟触发缩放等级改变的事件 this.onScaleChange(res); } }) }, 500); }, onHide() { // 停止检测 if (this.intervalId) { clearInterval(this.intervalId); this.intervalId = null; } }, methods: { onScaleChange(scale) { console.log("Current scale: " + scale); } } } </script>

更多关于uni-app 微信小程序中缩放地图后不会立即触发regionchange事件，要再拖动一下地图才可以的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的微信小程序地图组件行为特性。在微信小程序中，regionchange事件确实不会在纯缩放操作后立即触发，需要配合拖动才会触发。

解决方案建议：

  1. 可以监听bindupdated事件（对应uni-app的@updated），这个事件会在缩放后立即触发
  2. 或者同时监听@scale事件来获取缩放变化

修改后的代码示例：

<map 
    @regionchange="onRegionChange"
    @updated="onUpdated"
    @scale="onScale">
</map>

<script>
methods: {
    onUpdated(e) {
        console.log('地图更新', e)
    },
    onScale(e) {
        console.log('缩放变化', e)
    }
}
</script>
回到顶部