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

2023-12-01 0 104

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

微信为了解决这个问题,提供了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万的请求次数,对于中小应用已经足够,如果不够可以通过付费提升次数,这点个人觉得高德地图还是蛮好用的。

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

欢迎咨询定制

版权所属:傲刃服务商城

傲刃服务 建站教程 微信小程序开发中生成定位地图截图解决地图组件覆盖问题 https://www.lowcodebbs.com/1613.html

常见问题
  • 部署服务[500元]:提供代码部署服务,提供技术咨询客服
    一条龙服务[3000元]:包含 价值1799的云服务器、域名、SSL证书、备案服务、小程序免300认证开通、特约商户申请、支付接口申请等服务保障您系统的正常上线,如需软著、应用上架、提升服务器配置则另外收取费用。
查看详情
发表评论
暂无评论