近期接到一個(gè)小程序定制的項(xiàng)目，是屬于香港租房二手類型的，在租房的欄目中需要用到地圖顯示房源位置的功能，小程序二維碼如下圖，大家可掃碼體驗(yàn)。
在房源詳情頁(yè)面需要用到地圖組件，如下圖所示
小程序有個(gè)比較難解決的問(wèn)題是，地圖組件屬于原生組件，層級(jí)最高，所以底部的工具條是沒(méi)辦法覆蓋這個(gè)地圖組件。
微信為了解決這個(gè)問(wèn)題，提供了cover-view和cover-image兩個(gè)組件，可以覆蓋在原生組件之上的視圖和圖片組件。
但是還有兩個(gè)缺陷：
1、就是當(dāng)手觸摸到上面時(shí)，無(wú)法上下滾動(dòng)，這個(gè)問(wèn)題用cover-view和cover-image組件無(wú)法解決。
2、在開發(fā)工具模擬器中不會(huì)被浮動(dòng)普通層覆蓋，但在真機(jī)中會(huì)被穿透，比如當(dāng)?shù)撞扛?dòng)在地圖上面時(shí)，點(diǎn)擊浮動(dòng)塊上的按鈕時(shí)會(huì)點(diǎn)到地圖上。
為了解決這個(gè)問(wèn)題，最好的辦法就行不要用地圖原生組件，而是生成一個(gè)地圖圖片。
經(jīng)過(guò)查找，發(fā)現(xiàn)高德地圖有個(gè)API接口可以生成地圖圖片，非常好用。高德地圖接口地址如下 https://lbs.amap.com/api/webservice/guide/api/staticmaps
可以設(shè)置地圖中心、地圖圖片大小、地圖標(biāo)點(diǎn)名稱和大小、地圖尺寸等，基本完美解決這個(gè)問(wèn)題。
而且接口使用上非常簡(jiǎn)單，直接請(qǐng)求一個(gè)地址，就直接返回一個(gè)圖片,參考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;
高德地圖接口請(qǐng)求次數(shù)有限制，具體如下
1天有100萬(wàn)的請(qǐng)求次數(shù)，對(duì)于中小應(yīng)用已經(jīng)足夠，如果不夠可以通過(guò)付費(fèi)提升次數(shù)，這點(diǎn)個(gè)人覺得高德地圖還是蠻好用的。
方維網(wǎng)絡(luò)專注于微信小程序定制，可定制平臺(tái)小程序、商城小程序、租房二手小程序、旅游小程序、海外留學(xué)小程序、基因檢測(cè)小程序、律師平臺(tái)小程序等等，只要你有想法，符合邏輯，只要是微信小程序功能能實(shí)現(xiàn)的，我們基本都能實(shí)現(xiàn)！
歡迎咨詢定制熱線4008009385
在房源詳情頁(yè)面需要用到地圖組件，如下圖所示
小程序有個(gè)比較難解決的問(wèn)題是，地圖組件屬于原生組件，層級(jí)最高，所以底部的工具條是沒(méi)辦法覆蓋這個(gè)地圖組件。
微信為了解決這個(gè)問(wèn)題，提供了cover-view和cover-image兩個(gè)組件，可以覆蓋在原生組件之上的視圖和圖片組件。
但是還有兩個(gè)缺陷：
1、就是當(dāng)手觸摸到上面時(shí)，無(wú)法上下滾動(dòng)，這個(gè)問(wèn)題用cover-view和cover-image組件無(wú)法解決。
2、在開發(fā)工具模擬器中不會(huì)被浮動(dòng)普通層覆蓋，但在真機(jī)中會(huì)被穿透，比如當(dāng)?shù)撞扛?dòng)在地圖上面時(shí)，點(diǎn)擊浮動(dòng)塊上的按鈕時(shí)會(huì)點(diǎn)到地圖上。
為了解決這個(gè)問(wèn)題，最好的辦法就行不要用地圖原生組件，而是生成一個(gè)地圖圖片。
經(jīng)過(guò)查找，發(fā)現(xiàn)高德地圖有個(gè)API接口可以生成地圖圖片，非常好用。高德地圖接口地址如下 https://lbs.amap.com/api/webservice/guide/api/staticmaps
可以設(shè)置地圖中心、地圖圖片大小、地圖標(biāo)點(diǎn)名稱和大小、地圖尺寸等，基本完美解決這個(gè)問(wèn)題。
而且接口使用上非常簡(jiǎn)單，直接請(qǐng)求一個(gè)地址，就直接返回一個(gè)圖片,參考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;
高德地圖接口請(qǐng)求次數(shù)有限制，具體如下
1天有100萬(wàn)的請(qǐng)求次數(shù)，對(duì)于中小應(yīng)用已經(jīng)足夠，如果不夠可以通過(guò)付費(fèi)提升次數(shù)，這點(diǎn)個(gè)人覺得高德地圖還是蠻好用的。
方維網(wǎng)絡(luò)專注于微信小程序定制，可定制平臺(tái)小程序、商城小程序、租房二手小程序、旅游小程序、海外留學(xué)小程序、基因檢測(cè)小程序、律師平臺(tái)小程序等等，只要你有想法，符合邏輯，只要是微信小程序功能能實(shí)現(xiàn)的，我們基本都能實(shí)現(xiàn)！
歡迎咨詢定制熱線4008009385
