您好,登錄后才能下訂單哦!
本文實(shí)例講述了微信小程序使用map組件實(shí)現(xiàn)解析經(jīng)緯度功能。分享給大家供大家參考,具體如下:
聲明
bug: 頁(yè)腳的詳細(xì)地址在真機(jī)測(cè)試是會(huì)出現(xiàn)不顯示問(wèn)題?
造成原因:在小程序map組件的同一區(qū)域,map組件的視圖層比普通的文本視圖層要高,所以在真機(jī)會(huì)遮擋!
解決辦法:將該文本視圖采用cover-view,放在map中。
感謝: 感謝Lrj_estranged指出問(wèn)題!
效果圖
實(shí)現(xiàn)原理
1. map組件實(shí)現(xiàn)定位標(biāo)記或者指定定位標(biāo)記,并保存location。
2. 采用高德地圖微信小程序開(kāi)發(fā)API(getRegeo
)獲取當(dāng)前位置或者指定位置的詳細(xì)描述。
WXML
<view class="map_container"> <map class="map" longitude="{{longitude}}" latitude="{{latitude}}" include-points="{{points}}" markers='{{markers}}'></map> <view class="map-tab-bar map-foot {{isShow ? '' : 'map-hide'}}"> <view class="map-name">{{name}}</view> <view class="map-address">{{address}}</view> </view> </view>
JS
獲取當(dāng)前位置的經(jīng)緯度解析詳情
const app = getApp(); const amap = app.data.amap; const key = app.data.key; Page({ data:{ isShow: true, longitude:null, latitude:null, markers:[], points:[], name:'', address:'', location:'' }, onLoad(){ var _this = this; var myAmap = new amap.AMapWX({ key: key }); // 獲取定位地址的描述數(shù)據(jù) _this.getRegeo(myAmap); }, getRegeo(myAmap){ var _this = this; myAmap.getRegeo({ iconPath: '../../src/images/ding.png', width: 32, height: 32, location: _this.data.location, success(res) { var obj = res[0]; if (obj) { _this.setData({ longitude: obj.longitude, latitude: obj.latitude, name: obj.name, address: obj.desc, points: [{ longitude: obj.longitude, latitude: obj.latitude }], markers: [{ id: obj.id, latitude: obj.latitude, longitude: obj.longitude, iconPath: obj.iconPath, width: obj.width, height: obj.height }] }) } }, fail(res) { wx.showToast({ title: '失敗!' }) } }) } })
獲取指定位置的經(jīng)緯度解析詳情
// 獲取輸入地址的location // 假如輸入的是:成都 歐尚庭院 myAmap.getInputtips({ keywords: '歐尚庭院', city:'成都', success(res){ _this.setData({ location: res.tips[0].location }) /************************************************/ // 獲取輸入地址描述數(shù)據(jù) _this.getRegeo(myAmap); /************************************************/ } })
總結(jié)
1. 獲取當(dāng)前定位坐標(biāo)的經(jīng)緯度解析詳情,直接調(diào)用高德地圖API(getRegeo
),返回默認(rèn)當(dāng)前坐標(biāo)的詳情。
2. 獲取指定定位坐標(biāo)的經(jīng)緯度解析詳情,通過(guò)高德地圖API(getInputtips
)或者微信小程序的API(wx.chooseLocation
)獲取指定位置的 location ,通過(guò)高德地圖API(getRegeo
)獲取坐標(biāo)解析詳情。
希望本文所述對(duì)大家微信小程序開(kāi)發(fā)有所幫助。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。