小程序资讯

微信小程序开发中生成定位地图截图解决地图组件覆盖问题

小程序开发问题 2020-01-11 15:29:45 | 阅读:84
近期接到一个小程序定制的项目,是属于香港租房二手类型的,在租房的栏目中需要用到地图显示房源位置的功能,小程序二维码如下图,大家可扫码体验。
香港租房小程序二维码

在房源详情页面需要用到地图组件,如下图所示
香港租房小程序截图

小程序有个比较难解决的问题是,地图组件属于原生组件,层级最高,所以底部的工具条是没办法覆盖这个地图组件。

微信为了解决这个问题,提供了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;

高德地图接口请求次数有限制,具体如下

高德地图请求次数

1天有100万的请求次数,对于中小应用已经足够,如果不够可以通过付费提升次数,这点个人觉得高德地图还是蛮好用的。

方维网络专注于微信小程序定制,可定制平台小程序、商城小程序、租房二手小程序、旅游小程序、海外留学小程序、基因检测小程序、律师平台小程序等等,只要你有想法,符合逻辑,只要是微信小程序功能能实现的,我们基本都能实现!

欢迎咨询定制热线4008009385