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

2024-02-08 分类：网站建设

成都微信小程序开发定制如何解决地图组件覆盖问题？最近收到了一个小程序定制项目，属于香港二手租赁类型，在租赁栏需要使用地图显示房屋位置功能，小程序二维码如下图所示，您可以扫描代码体验。地图组件需要用于房屋详细信息页面。如下图所示，小程序难以解决的一个问题是，地图组件属于原始组件，层次最高，因此底部的工具条不能覆盖地图组件。

为了解决这个问题，微信提供了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;高德地图接口的请求次数有限。

网站名称：成都微信小程序开发定制如何解决地图组件覆盖问题？
标题链接：https://www.cdcxhl.com/news5/316955.html

成都网站建设公司_创新互联，为您提供手机网站建设、网站营销、网站收录、网页设计公司、软件开发、网站改版

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容