30、uni-app小程序接入地图选择地址

需要在uni-app的配置文件中,配置微信小程序的地址权限使用

然后打开配置文件的源码视图：找到mp-weixin部分添加代码
"requiredPrivateInfos" : [ "chooseLocation", "getLocation" ]

页面

<view class="uni-form-item uni-column address address-arrow">
  <view class="title">地址</view>
  <view class="operation" @click="selectAddress">
    <input v-model="addressInfo.address" class="uni-input" name="address" placeholder="请选择地址   " placeholder-class="address-pla">
  </view>
</view>

点击后的方法，先向用户获取地址的授权，再让用户选择地址并确定
点击右上角的确定后方可获得用户点击的详细地址信息

    selectAddress() {
      // 点击调起地图选择位置
      const that = this
      uni.authorize({
        scope: 'scope.userLocation',
        success(res) {
          console.log('scope.userLocation获得授权', res)
          // 选择位置
          uni.chooseLocation({
            success: function(res) {
              console.log('选择地点成功', res)
              console.log('位置名称：' + res.name)
              console.log('详细地址：' + res.address)
              console.log('纬度：' + res.latitude)
              console.log('经度：' + res.longitude)
              that.addressInfo.address = res.address
              that.addressInfo.latitude = res.latitude
              that.addressInfo.longitude = res.longitude
            },
            fail(error) {
              console.log('选择位置失败', error)
            }
          })
        }
      })
    }