我們要實現的是，點選一個按鈕然後，跳轉到地圖位置選擇頁面，選擇完位置之後，拿到詳細的資料資訊（經度、緯度、選擇名稱、選擇的詳情）多了不說，直接上程式碼。

1.wxml

<view class='mapContainer'>
      <view  class='longitude'>
        <text class='cont'>
          經度:\t\t\t{{location.longitude}}\n緯度:\t\t\t{{location.latitude}}\n位置名稱:\t\t\t{{location.name}}\n詳細地址:\t\t\t{{location.address}}\n點選選擇位置、選擇完地址之後，點選右上角確定
        </text>
      </view>
      <button class='page-body-button btn' bindtap='selectLocation'>選擇位置</button>
    </view>
 

2.wxss

.mapContainer{
  width: 100%;
}
.page-body-button{
  width: 98%;
  line-height: 2;
  background: #53cabd;
  color: #fff;
}
.cont{
  display: inline-block;
  line-height: 2;
  text-align: left;
  vertical-align: middle;
  margin-top: -48rpx; 
}
.longitude,.latitude{
  background: #000;
  color: #fff;
  text-align: center;
  font-size: 28rpx;
}
.btn{
  margin-top: 10rpx;
}
 

3.js

// 選擇位置
  selectLocation:function(e){//自行定義tap事件
    var that = this
    wx.chooseLocation({//微信API--開啟地圖選擇位置。
      success: function (res) {//成功之後，目前只返回這四組引數開啟地圖選擇位置。
      success: function (res) {//成功之後，目前只返回這四組引數

console.log(res.name) that.setData({ location: { name:res.name, address:res.address, longitude:res.longitude, latitude:res.latitude } }) }, fail:function(error){ console.log(error) }, complete:function(e){ console.log(e) } }) }

4.效果圖

自帶搜尋功能，很不錯的哦！

5.是不是很簡單呢？如果你想用這個經緯度，去調取其他的api也是可以的，例如調取谷歌的，百度的。

這是我的微信公眾號：

不定期更新前端知識