微信小程序地图控件置底如何设置?

　　微信小程序地图控件置底如何设置?小程序地图控件有缩小扩大地图的加减，有定位的控件，很多时候定位的控件都是要放在屏幕底部的，那么如何设置呢?下面跟随小编来了解下吧。

　　微信小程序地图控件置底如何设置?

　　微信小程序地图控件置的设置还是没那么麻烦，小编这里以微信小程序地图控件布局作为示范，告诉大家微信小程序地图控件置底如何设置。

　　地图控件布局

　　修改pages/index/index.wxml文件，添加map标签，如下

　　1、需要给地图指定一个id，后面可以通过id获取地图的上下文。

　　2、监听bindregionchange事件，地图变化的时候可以监听到。

　　3、地图的大小不要写死，动态设置，我这里打算设置为宽高都是屏幕宽度。

　　4、controls是固定在map小程序组件上面的。一开始我想用image替代，但是设置z-index也不能在地图上面，毕竟不是H5开发。

　　逻辑代码编写

　　编辑小程序js：

　　如果你看完上面的内容还是没思路，下面给大家一种方法作为参考。

　　我们都知道，map组件上面无法添加覆盖物，所以只能通过添加controls控件的方式来添加，

　　问题是controls控件的position只能指定下图的位置属*;

　　left,top都是Number类型，那如何适配屏幕呢?

　　这时候我们就可以通过 wx.getSystemInfo 接口获取屏幕大小信息，再计算出left和top的值，但是发现在通过this.setData更新时，这个控件都消失了，如何解决?

　　实际上，上面的计算的时候是有问题的，wx.getSystemInfo 获取的是屏幕大小(不是实际页面大小)，我们这时候只需要减掉微信顶部的标题栏和系统的状态栏的尺寸以及其他元素尺寸就行了，之所以出现上面小程序控件消失的问题，主要是因为你如果以屏幕为小程序页面大小，那么实际控件就有可能跑到屏幕外，这样就会导致不可见。

　　以上就是小编为大家搜集的微信小程序地图控件置底如何设置?的全部内容了，希望能帮到大家。如果你还有更多疑问或者建议，可以来我们微小乔的网站哦，谢谢大家的关注!

相关推荐：

微信小程序地图控件如何使用?

微信小程序地图标记功能怎么弄？

微信小程序导航地图开发实例