【uniapp 小程序】解决 map 组件出现标点(地图)自动偏移或 @regionchange 频繁触发的问题

这篇具有很好参考价值的文章主要介绍了【uniapp 小程序】解决 map 组件出现标点(地图)自动偏移或 @regionchange 频繁触发的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【uniapp / 小程序】解决 map 组件出现标点(地图)自动偏移或 @regionchange 频繁触发的问题

在业务开发中出现了地图的中心标点向右侧缓慢移动的问题,在我解决后又发现了 @regionchange 方法出现了无限调用的问题。这几个问题属于微信 map 地图组件迟迟未修复的bug。

本文仅解决与我相似的问题以做参考,并会附上对应的问题与参考的博客。

一、问题复现

1、地图无操作下出现缓慢的自行移动:

uniapp @regionchange,uni-app,小程序,uni-app,小程序,前端,前端框架

2、无触发下提示信息被一直触发:

uniapp @regionchange,uni-app,小程序,uni-app,小程序,前端,前端框架

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 。

uniapp @regionchange,uni-app,小程序,uni-app,小程序,前端,前端框架

解决代码:

通过限制静态时触发的偏移量,不触发对应的区域接口,各位的数据偏移量和方向可能各有不同,需要根据具体的问题进行设置。文章来源地址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
	}
},

参考文献:

  1. 微信小程序–地图regionchange事件频繁触发导致崩溃-CSDN博客
  2. 微信小程序 地图定位、选址,解决regionchange重复调用-CSDN博客
  3. 微信小程序 地图定位、选址,解决regionchange重复调用-CSDN博客
  4. Map 组件在开发者工具中一直自己移动,真机正常 | 微信开放社区 (qq.com)

到了这里,关于【uniapp 小程序】解决 map 组件出现标点(地图)自动偏移或 @regionchange 频繁触发的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包