本文實例講述了微信小程序使用map組件實現(xiàn)解析經(jīng)緯度功能。分享給大家供大家參考，具體如下：
聲明
bug： 頁腳的詳細地址在真機測試是會出現(xiàn)不顯示問題？
造成原因：在小程序map組件的同一區(qū)域，map組件的視圖層比普通的文本視圖層要高，所以在真機會遮擋！
解決辦法：將該文本視圖采用cover-view，放在map中。
感謝： 感謝Lrj_estranged指出問題！
效果圖
實現(xiàn)原理
1. map組件實現(xiàn)定位標記或者指定定位標記，并保存location。
2. 采用高德地圖微信小程序開發(fā)API（getRegeo）獲取當前位置或者指定位置的詳細描述。
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
獲取當前位置的經(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. 獲取當前定位坐標的經(jīng)緯度解析詳情，直接調(diào)用高德地圖API（getRegeo ），返回默認當前坐標的詳情。
2. 獲取指定定位坐標的經(jīng)緯度解析詳情，通過高德地圖API（getInputtips）或者微信小程序的API（wx.chooseLocation）獲取指定位置的 location ，通過高德地圖API（getRegeo ）獲取坐標解析詳情。
希望本文所述對大家微信小程序開發(fā)有所幫助。
新聞熱點
疑難解答
