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

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;高德地图接口的请求次数有限。

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

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

广告

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

外贸网站制作