本文實例講述了微信小程序使用map組件實現解析經緯度功能。分享給大家供大家參考，具體如下：

聲明

bug： 頁腳的詳細地址在真機測試是會出現不顯示問題？

造成原因：在小程序map組件的同一區域，map組件的視圖層比普通的文本視圖層要高，所以在真機會遮擋！

解決辦法：將該文本視圖采用cover-view，放在map中。

感謝： 感謝Lrj_estranged指出問題！

效果圖

實現原理

1. map組件實現定位標記或者指定定位標記，并保存location。

2. 采用高德地圖微信小程序開發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

獲取當前位置的經緯度解析詳情

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 });  // 獲取定位地址的描述數據  _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: '失敗！' })   }  }) }})

獲取指定位置的經緯度解析詳情

// 獲取輸入地址的location// 假如輸入的是：成都 歐尚庭院myAmap.getInputtips({ keywords: '歐尚庭院', city:'成都', success(res){  _this.setData({   location: res.tips[0].location  })  /************************************************/  // 獲取輸入地址描述數據  _this.getRegeo(myAmap);  /************************************************/ }})

總結

1. 獲取當前定位坐標的經緯度解析詳情，直接調用高德地圖API（getRegeo ），返回默認當前坐標的詳情。