uniapp-小程序开发map地图组件的@regionchange首页刷新的时候连续执行问题

最新推荐文章于 2024-05-07 17:35:23 发布
最新推荐文章于 2024-05-07 17:35:23 发布
阅读量1.4k 收藏 3
点赞数
文章标签： uni-app 前端 java 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pirs123/article/details/126588649
版权

问题引出

        公司做的是电瓶车换电项目，所已涉及用到地图展示线下换电点位，由于点位过多一次性请求出来性能非常大，对用户体验也不好，所有用到了@regionchange来实现根据当前位置返回附近几公里范围的点位，但是问题就出现在小程序首次刷新的时候会出现@regionchange连续执行4此的问题（地图没有拖动的情况下）直接看图👇

 分析原因：

        我费了九牛二虎之力才发现出现这个问题是因为我动态的设置了map地图组件必填的latitude和longitude

 当你的map组件动态设置了这两个值后就会出现@regionchange在小程序刚加载没拖动地图的情况下出现连续执行的情况

解决办法：

官方文档没有给出相对应的解决办法，我想到的一个笨办法就是用当前经纬度与map组件的方法

getCenterLocation获取地图中心点经纬度相减如果你首次进入首页没有移动地图你最后减到的值会是0，这时候我们就可以根据0对@regionchange的连续执行进行拦截

 

 

 

 

 

Pir。。。。
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序地图(map)组件点击(tap)获取经纬度的方法
12-12
微信小程序中使用地图(map)组件，通过点击(tap)获取经纬度，按照官方的回应，暂时是没法做到的，从地图组件API多有残缺判断，怀疑是个实习生干的… 做个变通，适用性有限，请大家参考。基本思路就是在地图上铺满一层marker，从而通过点击marker获得经纬度。 代码如下:<map id=”map” longitude=”102.324520″ latitude=”40.099994″ scale=”4″ bindcontroltap=”controltap” polygons=”{{polygons}}” bindregionchange=”regionchange” markers=”
uniapp地图 监听滑动后事件，根据中心位置的经纬度，重新查询数据
yjl23332的博客
07-02 2513
第一个问题：如何监听到地图移动后的事件。 可以使用：@regionchange事件 虽然上面没有写nvue和vue可用，但是测试了一波，是可以的 手机安卓和IOS系统的可能会发生的事情，这个大佬写的可以，我没有深入那么多， 地址：https://ask.dcloud.net.cn/article/38699 然后我们只需要再结束移动的监听中，获取到当前中心点的位置，第二个问题出现了，如何获取当前中心点位置。 第二个问题：如何获取当前中心点位置 查看uniapp所有关于地图的解释，我再API中找到一个方法，
微信小程序地图绘制线段并且测量(实例代码)
12-13
上图： 上代码：wxml <map id="tb_map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" bindtap="clickMapTap" bindcontroltap="controltap" bindregiοnchange="regionchange" markers="{{marks}}" polygons="{{polygons}}" polyline="{{polyline}}" include-points="{{includePoints}}" bindmarkertap="marke
微信小程序之地图功能（map）
03-29
基本使用 地图组件使用起来也很简单。 .wxml <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" circles="{{circles}}" bindregionchange="regionchange" show-location style="w
小程序基本命令
aiven1637的博客
10-30 3215
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序 地图定位、选址，解决regionchange重复调用
热门推荐
yechaoa
08-24 1万+
效果： 需求 定位到当前位置，并查询周边的地址显示到列表中，且地图可以拖动选取位置 实现 1，在wxml中添加视图view &lt;map id="map" longitude="{{myLongitude}}" latitude="{{myLatitude}}" scale="18" bindcontroltap="controltap" markers="{{ma
【uniapp 小程序】解决 map 组件出现标点（地图）自动偏移或 @regionchange 频繁触发的问题
Brod-Roy的博客
11-16 1631
在业务开发中出现了地图的中心标点向右侧缓慢移动的问题，在我解决后又发现了 @regionchange 方法出现了无限调用的问题。 本文仅解决与我相似的问题以做参考，并会附上对应的问题与参考的博客。
uniapp map组件的regionchange方法（二）
CC的博客
10-23 4392
之前用到加载多边形，通过缩放，拖动会产生范围的变化，需要重新加载当前视窗的多边形 地图加载 <view class="page-section page-section-gap"> <map id="mapInfo" ref="mapInfo" class="mapinfo" :latitude="coordinate.lat" :longitude="coordinate.lng" :markers="covers" :show-location="true"
uniapp开发APP的超级无敌坑！！！map地图组件的getCenterLocation 没有回调问题，map地图不显示点位问题
pirs123的博客
12-04 650
编译运行到手机上时map地图的markes地图点位全部消失，包括地图上面的已经图标，我百思不得其解，后来找度娘才知道，要用nvue才能支持，后面我就加了nvue绘制了一个地图，真的能显示点位了。但是问题来了，当我想使用getCenterLocation移动地图获取经纬度的时候竟然不给我回调，于是我又去找度娘，结果问的倒是有，解决这个问题的没找到。神奇的事情发生了，当我再次移动地图是，终于有回调了，拿到了经纬度。没有办法我自己摸索，经过我一顿异于常人的操作后终于发现了诀窍。
微信小程序regionchange
weixin_45121701的博客
03-05 935
牛客网白给的共享单车项目 regionchange: function (e) { //console.log(e); //获取移动后的位置 var that = this; var etype = e.type; if (etype == "end") { this.mapCtx.getCenterLocation({ succ...
微信小程序实现轨迹回放的示例代码
12-30
在微信小程序实现轨迹回放的效果 1、wxml <map id=map longitude={{longitude}} latitude={{latitude}} scale=16 bindcontroltap=controltap bindmarkertap=markertap markers={{markers}} polyline={{polyline}}...
完美解决DataGridView的OnSelectionChanged执行两次的问题
09-20
这个问题困扰了很多人，在网上也没找到有效的解决...结合网上大神们提供的方法，最终用重写 的方式完美解决DataGridView的OnSelectionChanged事件执行两次的问题。并一同实现了滚轮移动选择数据的方法，也是重写方法。
解决uniapp微信小程序使用腾讯地图视野变化标记闪烁问题
qq_44540152的博客
08-09 3355
此外腾讯地图还有个坑，经过本人测试在开发工具上第一次不会触发regionchange事件，但是在真机上会触发 / 解决标注位置闪烁问题 var distance = this.getDistance(res.latitude, res.longitude, this.latitude, this.longitude) if ((res.latitude == this.latitude && res.longitude == this.longitude) || distance <
小程序-视野发生变化时-导致重复触发bindregionchange且视野不能再次更改的原因分析及解决
大磊的博客
07-31 6621
当触发事件：bindregionchange时，可以通过getCenterLocation的方式来获取当前页面的中心的经纬度信息并将经纬度信息设置到data中，在控件被点击事件时，将当前的data里的经纬度信息，赋给markers,从而实现利用视野改变+控件点击实现指定的效果。但是，如果在bindregionchange事件的函数里去利用当前的中心位置更改data里的经纬度，bindregionc...
uniapp map组件多边形、标记点的坑（一）
CC的博客
09-04 8047
最近项目用到uniapp开发微信小程序，需要在地图上展示多边形，标记点 一、地图加载 <view class="page-section page-section-gap"> <map id="mapInfo" ref="mapInfo" class="mapinfo" :latitude="coordinate.lat" :longitude="coordinate.lng" :markers="covers" :show-location="true"
uniapp开发小程序时map地图使用
qq_42581267的博客
07-15 5266
uniapp开发小程序时map地图使用，监听拖拽，获取屏幕坐标，中心坐标
微信小程序--地图regionchange事件频繁触发导致崩溃
zhangdaren的专栏
10-25 8364
之前在做小程序“找厕所”的时候，需要在移动地图时，自动寻找当前地图中心点附近的厕所。模拟器上面运行的挺好，真机上面测试发现会不断刷新所有maker，打开调试窗口看到不断触发regionchange 事件，造成频繁请求而报错。 在微信小程序论坛上太多人遇到这个问题，官方回复:承认bug，等待修复。然而几个月过去依然如些，官方靠不住
微信小程序首页OnLoad调用两次问题
wujize的博客
08-11 4138
最近调试微信小程序时，发现登录首页会执行两次，后查找相关内容发现了问题原因如下： 1、微信小程序启动时，app.json pages第一行是一定要执行的 “pages”:[ “pages/login/login”, 2、在onLunch中加了下面代码，导致了login第2次执行，把下面删除即可。 wx.redirectTo({ url: ‘pages/login/login’}); ...
uniapp日期区间选择器
最新发布
羽筠的博客
05-07 251
uniapp日期区间选择器 在 uniapp 中创建一个简单的自定义日期范围的日期区间选择器： - 限制有效日期范围开始日期为 2024-01-01，结束日期为当日； - 默认日期区间为当日向前计算的7日区间； - 选择开始时间后，判断不可大于结束时间，且重置开始时间为结束时间； - 选择结束时间后，判断不可小于开始时间，且重置结束时间为开始时间； 示例代码： html： CSS： data设置参数数据： created 或 onLoad 中，调用请求接口获取筛选项数据方法： methods 处理方法：
小程序设置地图组件的可移动的范围
03-27
1. 使用缩放视角 可以通过设置地图缩放级别的方式，限制地图可移动的范围。在小程序中，可以使用 map 组件的 `scale` 属性设置地图的缩放级别。通过设置最大和最小的缩放级别，可以限制地图可移动的范围。 例如： ```html <map id="map" scale="{{scale}}" bindregionchange="regionchange" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" style="width: 100%; height: 300px;"></map> ``` ```javascript Page({ data: { scale: 14, // 地图缩放级别 longitude: 114.06667, // 中心经度 latitude: 22.61667, // 中心纬度 markers: [] }, regionchange(e) { // 监听地图缩放事件 if (e.type === 'end') { const { scale, longitude, latitude } = this.data; if (scale < 14) { // 缩放级别小于14时，重置地图中心点 this.setData({ longitude: 114.06667, latitude: 22.61667 }); } if (longitude < 113.5 || longitude > 114.5 || latitude < 22 || latitude > 23) { // 经纬度超出范围时，重置地图中心点 this.setData({ longitude: 114.06667, latitude: 22.61667 }); } } } }); ``` 在上面的代码中，当地图缩放级别小于14时，将地图中心点重置为指定的经纬度。当地图中心点超出指定的经纬度范围时，也将地图中心点重置为指定的经纬度。 2. 使用地图限制区域 在高德地图和腾讯地图中，可以使用 `setLimitBounds` 方法设置地图的限制区域。在小程序中，可以通过调用 map 组件的 `getMapContext` 方法获取地图上下文，然后调用 `setLimitRegion` 方法设置地图的限制区域。 例如： ```javascript Page({ onReady() { this.mapCtx = wx.createMapContext('map'); this.mapCtx.setLimitRegion({ // 设置地图限制区域 southwest: { latitude: 22, longitude: 113.5 }, northeast: { latitude: 23, longitude: 114.5 } }); } }); ``` 在上面的代码中，设置地图的限制区域为经度在 113.5 - 114.5 之间，纬度在 22 - 23 之间的区域。当用户拖动地图时，地图将受到限制，无法超出指定的区域。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值