如果要說(shuō)小程序比公眾號(hào)和H5網(wǎng)頁(yè)好在哪，位置定位用戶體驗(yàn)算是一個(gè)不錯(cuò)的地方。

方維網(wǎng)絡(luò)在為客戶定制開發(fā)小程序的時(shí)候，經(jīng)常會(huì)遇到使用地圖顯示特定位置的功能需求，如下圖所示。




看到這個(gè)界面，很多人會(huì)想通過(guò)騰訊的地圖MAP組件去構(gòu)造這個(gè)頁(yè)面，但始終還是很難做到一模一樣，其實(shí)點(diǎn)擊右下角那個(gè)綠色的按鈕，還有如下功能



其實(shí)這個(gè)界面是微信小程序自帶的，如果知道位置名稱、地址、經(jīng)緯度，使用API就可以跳轉(zhuǎn)到這個(gè)界面。接口如下所示

wx.openLocation({
  latitude:parseFloat(latitude),//緯度，范圍為-90~90，負(fù)數(shù)表示南緯。使用 gcj02 國(guó)測(cè)局坐標(biāo)系
  longitude:parseFloat(longitude),//經(jīng)度，范圍為-180~180，負(fù)數(shù)表示西經(jīng)。使用 gcj02 國(guó)測(cè)局坐標(biāo)系
  name: address_name,//位置名
  address:address,//地址的詳細(xì)說(shuō)明
  scale: 18
})

其中scale是地圖縮放比例 范圍5~18，就是地圖顯示位置比例大小。

這樣就實(shí)現(xiàn)了微信小程序查看地圖的功能。這里延升一下，我們?cè)陂_發(fā)過(guò)程中遇到的問(wèn)題是：一般是需要點(diǎn)擊小地圖到這個(gè)界面，而小地圖需要不能拖放和點(diǎn)擊移動(dòng)，雖然微信小程序有這個(gè)參數(shù)控制，但實(shí)際是個(gè)坑，基本沒(méi)用。

我們的解決辦法是在小地圖上面覆蓋一個(gè)透明的cover-view來(lái)實(shí)現(xiàn)，代碼如下

<map id="map" longitude="{{data.longitude}}" latitude="{{data.latitude}}" scale="14" markers="{{markers}}" enable-scroll="false" enable-zoom="false" enable-rotate="false" show-location style="width: 100%; height:450rpx;">
<cover-view data-longitude="{{data.longitude}}" data-latitude="{{data.latitude}}" data-address_name="{{data.address_name}}" data-address="{{data.address}}" bindtap="goMap" style="width:100%;height:450rpx" class="map_cover"></cover-view>
</map>

從而完美實(shí)現(xiàn)這一功能。

方維網(wǎng)絡(luò)從微信小程序推出開始，就一直研究小程序定制開發(fā)，目前已經(jīng)積累了豐富的開發(fā)經(jīng)驗(yàn)，因?yàn)橐呀?jīng)跳了很多坑，所以哪里有坑，我們都知道，可以保證開發(fā)效率和開發(fā)質(zhì)量，把小程序的用戶體驗(yàn)做到極致。

如果你有需求定制小程序，可聯(lián)系我們小程序開發(fā)咨詢熱線400-800-9385