uni-app 地图组件自己往右缓慢滑动问题

uni-app 地图组件自己往右缓慢滑动问题

操作步骤：

  • 问题就在getCenterLocation这里，去掉就不会动了

预期结果：

  • 1

实际结果：

  • 1

bug描述：

  • 进入的时候不动，只要你滑动过，然后地图自动的缓慢像右滑动
  • 代码贴出来了，是写的不对吗？
  • 记得之前没这个问题啊
<template>  
<map id="map" ref="map" :style="{width: '750rpx', height: mapHeight}" scale="17" :longitude="form.longitude"  
             :latitude="form.latitude" @regionchange="regionchange"></map>  
</template>  

<script>  
var mapContext = null;  
let mapSearch = weex.requireModule('mapSearch');  

export default {  
        mixins: [globalFunction],  

        data() {  
form: {  
                    // 经度  
                    longitude: '',  
                    // 纬度  
                    latitude: '',  
},  

// 地图滑动计数  
                regionchangeNumber: 0,  

},  

onLoad(){  
mapContext = uni.createMapContext('map', this);  
},  

methods: {  

getConvertCoordinate(val) {  
                return val.toString().match(/^\d+(?:\.\d{0,6})?/)[0];  
            },  

regionchange(e) {  
                if (e.type == 'end') {  

                    // 第一次进入不进行向下执行，因为进入页面时地图高度计算会触发此函数  
                    this.regionchangeNumber += 1;  
                    if (this.regionchangeNumber == 1) {  
                        return;  
                    }  

                    uni.hideKeyboard();  

                    mapContext.getCenterLocation({  
                        success: res => {  
                            this.form.longitude = this.getConvertCoordinate(res.longitude);  
                            this.form.latitude = this.getConvertCoordinate(res.latitude);  
                            // 反向查询address  
                            mapSearch.reverseGeocode({  
                                point: {  
                                    latitude: res.latitude,  
                                    longitude: res.longitude  
                                }  
                            }, res => {  
                                //console.log(res)  
                                this.form.address = res.address;  
                            });  
                        }  
                    })  
                }  
            },  

}  
</script>

附件

开发环境 版本号 项目创建方式
Windows win10 HBuilderX
uniapp/App 3.1.3 -
Android Android 10 -
手机厂商 手机机型 页面类型
小米 k30s nvue

更多关于uni-app 地图组件自己往右缓慢滑动问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

16 回复

这是bug了吧？ regionchange应该手离开会停止， 我我发现mapContext.getCenterLocation({这个在一直不停的返回，也就是地图一直动不停才这样

更多关于uni-app 地图组件自己往右缓慢滑动问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


完整示例发出来

发了，

传了是真机视频，里面能看出具体情况

回复 choin: 没要视频 要的是demo示例

回复 DCloud_Android_ST: 代码改了 啊

我发个视频只是给你看看是什么样的感觉呀

回复 choin: 。。。没那多时间查看 给个demo我们找测试人员定位。你这代码复制粘贴还有语法错误

回复 DCloud_Android_ST: 错误应该是mapHeight和mixins， mapHeight你自己写个高度，mixins去掉就行了

顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶

顶顶顶顶顶顶顶

排着呢。要不提供个示例 相关人员测试优先级会变高。

回复 DCloud_Android_ST: 好的， 我以为沉了呢， 辛苦了~

回复 DCloud_Android_ST: 老铁，uni.getLocation获取的address地址信息的拆分开的，而reverseGeocode反向地理编码，不能地址信息拆分开，这个bug能否给解决一下呢，我去搜了下高德那边sdk是支持拆分的呢

解决方案：map组件上的经纬度只在进来的时候加载一次，单独设置提交form的经纬度， 之前在拖动后，我做了组件经纬度动态修改，但是之前没有滑动 估计hx更新之后在经纬度设置上官方应该是做了经纬度的精确计算，所以与传进去的经纬度有偏差导致一直滑动

根据你提供的代码和描述，地图自动向右滑动的问题确实与getCenterLocation方法有关。问题出在regionchange事件的频繁触发和状态更新导致的循环反馈。

主要问题分析：

  1. 当用户滑动地图触发regionchange事件时，会调用getCenterLocation获取中心点坐标
  2. 获取到新坐标后更新了form.longitude和form.latitude
  3. 这些数据绑定到了map组件的longitude和latitude属性，导致地图重新定位
  4. 重新定位又会触发新的regionchange事件，形成循环

解决方案：

  1. 在regionchange中增加判断，只有当用户真正手动滑动时才执行反向地理编码
  2. 或者使用一个标志位控制是否允许更新中心点

修改建议：

regionchange(e) {
    if (e.type == 'end') {
        this.regionchangeNumber += 1;
        if (this.regionchangeNumber <= 1) return;
        
        uni.hideKeyboard();
        
        // 添加防抖处理
        if(this.timer) clearTimeout(this.timer);
        this.timer = setTimeout(() => {
            mapContext.getCenterLocation({
                success: res => {
                    // 先比较新旧坐标差异，避免微小变动触发更新
                    const newLng = this.getConvertCoordinate(res.longitude);
                    const newLat = this.getConvertCoordinate(res.latitude);
                    if(Math.abs(newLng - this.form.longitude) > 0.0001 || 
                       Math.abs(newLat - this.form.latitude) > 0.0001) {
                        this.form.longitude = newLng;
                        this.form.latitude = newLat;
                        // 反向查询address
                        mapSearch.reverseGeocode({
                            point: {
                                latitude: res.latitude,
                                longitude: res.longitude
                            }
                        }, res => {
                            this.form.address = res.address;
                        });
                    }
                }
            })
        }, 300);
    }
}
回到顶部