【uniapp / 小程序】解决 map 组件出现标点(地图)自动偏移或 @regionchange 频繁触发的问题
在业务开发中出现了地图的中心标点向右侧缓慢移动的问题,在我解决后又发现了 @regionchange 方法出现了无限调用的问题。这几个问题属于微信 map 地图组件迟迟未修复的bug。
本文仅解决与我相似的问题以做参考,并会附上对应的问题与参考的博客。
一、问题复现
1、地图无操作下出现缓慢的自行移动:
2、无触发下提示信息被一直触发:
3、相关的问题代码
<template>
<view>
<map id="map" :scale="scale[scaleIndex].name" :circles="circles" :latitude="lat" :longitude="lng"
:markers="markers" :show-location="true" @regiοnchange="changeRegion" @callouttap="handleCallout"
@tap="tapMap">
</map>
</view>
</template>
- scale:缩放
- circles:区域圆
- latitude\longitude:地图中心坐标
- markers:标点
- show-location:带箭头的当前坐标
- regionchange:视角移动切换时触发
- callouttap:点击标点事件
- tap:点击地图触发事件
changeRegion(e) { //中心点标记始终在地图中心位置不动
let that = this;
this.mapCtx = uni.createMapContext('map');
this.mapCtx.getCenterLocation({
success(res) {
const latitude = res.latitude
const longitude = res.longitude
console.log(latitude, longitude);
console.log(that.lat, that.lng);
that.lat = latitude
that.lng = longitude
if (that.scrollTimer) {
clearTimeout(that.scrollTimer);
}
that.scrollTimer = setTimeout(() => {
that.latitude = res.latitude;
that.longitude = res.longitude;
that.getMapHouses(res.longitude, res.latitude); // 请求区域内存在数据
}, 1500)
}
})
},
二、问题解决
主要问题存在于 @regionchange 方法不断被触发,且不移动时获取的维度坐标总比我们当前的 -1 。
文章来源:https://www.toymoban.com/news/detail-777427.html
解决代码:
通过限制静态时触发的偏移量,不触发对应的区域接口,各位的数据偏移量和方向可能各有不同,需要根据具体的问题进行设置。文章来源地址https://www.toymoban.com/news/detail-777427.html
changeRegion(e) { //中心点标记始终在地图中心位置不动
console.log(e);
let that = this;
if (e.type == 'end') { // 仅获取结束坐标
this.mapCtx = uni.createMapContext('map');
this.mapCtx.getCenterLocation({
success(res) {
const latitude = res.latitude
const longitude = res.longitude
if ((that.lng - longitude) < 0.000005 && (that.lng - longitude) > 0 &&
latitude == that.lat) { // 对静态移动标点做限制防止偏移
return
}
if (that.scrollTimer) { // 设置节流,进一步限制高频触发
clearTimeout(that.scrollTimer);
}
that.scrollTimer = setTimeout(() => {
that.lat = latitude
that.lng = longitude
that.latitude = res.latitude;
that.longitude = res.longitude;
that.getMapHouses(res.longitude, res.latitude); // 请求区域内存在数据
}, 1500)
}
})
} else { // begin
}
},
参考文献:
- 微信小程序–地图regionchange事件频繁触发导致崩溃-CSDN博客
- 微信小程序 地图定位、选址,解决regionchange重复调用-CSDN博客
- 微信小程序 地图定位、选址,解决regionchange重复调用-CSDN博客
- Map 组件在开发者工具中一直自己移动,真机正常 | 微信开放社区 (qq.com)
到了这里,关于【uniapp 小程序】解决 map 组件出现标点(地图)自动偏移或 @regionchange 频繁触发的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!