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)
            }
          })
        }
      })
    }
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值