• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序--地图组件与api-模拟器上返回的scale 与真机上不同--bindregionchange触发 ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

场景:根据地理定位获取不同地区的充电桩位置,要求

1.平移的时候,跟随坐标变化展示不同区域的坐标点信息

2.不同的缩放等级,14以下,展示聚合点数据,14以上,展示真正的站点信息;

3.点击聚合点的时候,当前地图会放大,直到缩放等级大于14为止,最终的结果是展示真正的站点信息而不是聚合点

实现原理:

map组件提供了bindregionchange函数,可以监听视野变化,目前测试下来(不知道还有没有别的),能够引起视野变化的有:

1.改变经纬度

2.改变缩放等级

因此,利用这两点,可以达到我们的需求。

定义一个函数getLngLat,这个函数,获取当前的缩放等级与中心点坐标,然后根据当前的缩放等级,来决定是调用站点信息接口,还是聚合站点列表接口

getLngLat: function() {
var that = this;
this.mapCtx = wx.createMapContext("map");
// //获取缩放等级
this.mapCtx.getScale({
...
});
//获取中心坐标点
that.mapCtx.getCenterLocation({
...
});
//根据缩放等级来请求,如果是最低的等级,直接请求详情列表,如果缩放等级很大,请求集合数据
if (scale >= 14) { 
that.searchStation(res.latitude, res.longitude);//请求具体站点接口
} else {
that.getStationList(res.longitude, res.latitude, scale);//请求聚合信息接口
}
}
});
 
然后在bindregionchange函数中执行他
// 视野发生事件
regionchange(e) {
let that = this;
if (e.type == \'end\') {
this.getLngLat();
} else {}
}
这样就解决了平移以及根据当前缩放等级来请求不同的接口的问题
 
然后,如果展示的是聚合点,要点击能继续放大地图
 
这点的实现思路是,由于聚合点和真正的站点信息都是markers,那么监听markers的点击事件,当点击的时候,获取当前的缩放等级,如果大于14,就说明是站点的信息,直接弹出站点详情,如果小于14,说明是聚合点,
前面我们说过,当缩放等级或者经纬度变化的时候,bindregionchange函数会被触发,因此在这个函数中,把获取到的scale ,setData到当前,就会自动执行bindregionchange里的getLngLat函数,(获取当前的缩放等级,获取中心点坐标,根据坐标与缩放等级请求不同的接口)
 
//地图标记点击事件
markertap: function(e) {
 
//如果当前的scale大于等于14,直接展示站点信息,否则就放大
// //获取缩放等级
this.mapCtx.getScale({
success: function(res) {
let scale = parseInt(res.scale);
if (scale < 14) {
that.setData({
scale_c: scale+1//改变当前的缩放等级,为了触发bindregionchange函数
})
} else {
},
});
},
 然后开始测试
 
接下来重点来了!!!
 
按照上面的写法,在模拟器上测试的时候,点击聚合点,会一直缩小,直到scale==3为止。。。。
大写的懵,感觉实现没问题啊,查了很久发现,在模拟器上获取的scale,和真机上是不一样的啊,请同志们一定要在真机上测试啊!!!!
这是个bug吧。。。
 
恩,最后我放弃了模拟器,反正客户又不用看模拟器,手机正常就行。。。
 

bug&坑:

bindregionchange中,不能直接setData 经纬度和scale,否则会一直闪现

模拟器和真机上,返回的scale不一致,建议真机测试

 

再次注意:

一定要仔细检查传参啊,很多小问题都是最基础的造成的。。。。

 

资料参考:

微信小程序腾讯地图bindregionchange事件导致图标闪烁的解决方法:

https://blog.csdn.net/u013631121/article/details/81225865

感谢

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序富文本解析利器mp-html发布时间:2022-07-18
下一篇:
全栈开发工程师微信小程序-中发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap