上海微信小程序开发定制如何解决地图组件覆盖问题？

上海微信小程序开发定制如何解决地图组件覆盖问题？最近收到了一个小程序定制项目，属于香港二手租赁类型，在租赁栏需要使用地图显示房屋位置功能，小程序二维码如下图所示，您可以扫描代码体验。地图组件需要用于房屋详细信息页面。如下图所示，小程序难以解决的一个问题是，地图组件属于原始组件，层次最高，因此底部的工具条不能覆盖地图组件。 为了解决这个问题，微信提供了cover-view和cover-image两个组件，可以覆盖原始组件的视图和图片组件。但也有两个缺陷：1.当手触摸上面时，不能上下滚动，这个问题是用来解决的cover-view和cover-image组件无法解决。2.在开发工具模拟器中不会覆盖浮动普通层，但会穿透真机。 例如，当底部浮动在地图上时，点击浮动块上的按钮到地图上。为了解决这个问题，最好的办法不是使用地图原始组件，而是生成地图图片。经过搜索，发现高德地图上有一张高德地图API接口可以生成地图图片，非常好用。
高德地图接口地址如下https://lbs.amap.com/api/webservice/guide/api/staticmaps可设置地图中心.地图大小.地图标点名称和大小.地图尺寸等，基本完美地解决了这个问题。而且界面使用非常简单，直接请求地址，直接返回图片，参考PHP代码如下：$param_markers='markers=mid,0xFF0000,:'.$house["longitude"].','.$house["latitude"].';'.$house["longitude"].','.$house['latitude'].'&';$param_size='size=750*400&';$param_zoom='zoom=17&';//$param_labels='labels='.$house['address_name'].',2,0,16,0xFFFFFF,0x008000:'.$house["longitude"].','.$house["latitude"].'&';$request_url=$amap_url_staticmap.$param_zoom.$param_markers.$param_size.'key='.$amap_key;return$request_url;高德地图接口的请求次数有限。
具体来说，每天有100万的请求次数，这对于中小应用来说已经足够了。如果不够，可以通过付费增加次数。关于上海微信小程序开发定制如何解决地图组件覆盖的问题已在上文给大家解答！