微信小程序開發(fā)中生成定位地圖截圖解決地圖組件覆蓋問題

清單詳細信息頁面上需要 map 組件，如下所示：

在小程序中還有一個比較難解決的問題就是地圖組件是一個本機組件，是最高級別的，所以工具欄的底部是無法覆蓋這個地圖組件的。

微信通過提供覆蓋視圖和覆蓋圖像組件來解決這個問題，這些組件可以覆蓋在原生組件視圖和圖片組件之上。

但還有兩個缺陷:

1 、就是當(dāng)手碰到頂部時，不能上下滾動，這個問題用封面—視圖和封面—圖像組件解決不了。

2 、在開發(fā)工具模擬器中不會被浮動普通圖層覆蓋，而是在實機中會被穿透，比如當(dāng)?shù)撞扛釉诘貓D上方時，點擊浮動塊上的按鈕會指向地圖。

要解決這個問題，最好的方法不是使用地圖本機組件，而是生成一個地圖圖像.

看了一下，發(fā)現(xiàn)德國有一個 API 可以生成地圖圖片，非常好用。高德地圖界面地址如下https://lbs.amap.com/api/webservice/guide/api/staticmaps。

可以設(shè)置地圖中心、地圖圖片大小、地圖標(biāo)點名稱和大小以及地圖大小等，基本上完美的解決了這個問題。

而且界面使用起來非常簡單，直接請求一個地址，直接返回一張圖片，引用PHP代碼如下:

$param_size = 'size=750*400&'

$param_zoom = 'zoom=17&'

$request_url = $amap_url_staticmap.$param_zoom.$param_markers.$param_size.'key='.$amap_key

return $request_url

高德地圖接口請求時間是有限制的，如下所示。

一天有100萬請求，對于中小應(yīng)用來說已經(jīng)足夠了，如果不夠付費提升次數(shù)，這一點我個人覺得高德地圖還是剛剛好用。

易啟科技專注于支付寶小程序開發(fā),微信商城小程序,抖音商城小程序,官網(wǎng)小程序,小程序開發(fā)公司，歡迎學(xué)習(xí)交流。