微信小程序打开地图选择位置,返回位置并且调用高德API获得对应位置的省市区

	<view @click="toCommunity"></view>


    // 选择小区
    toCommunity() {
      const that = this
      // 同伙getSettingAPI获取授权状态
      // 如果未授权且是第一次点击,则需要弹框提示授权
      //   点击弹框确认按钮,则调用authorize,弹出微信内置授权弹框
      // 如果已经拒绝过授权了,就无需弹框提示,直接打开设置页面
      //    设置页面返回后,可以使用success/fail回调,判断用户是否授权
      //    如果已经授权,则直接调用openMap前往选择地址
      //    如果未授权,则不需要操作
      // 如果已经授权,则直接调用openMap前往选择地址

      uni.getSetting({
        success: function(res) {
          if (!res.authSetting['scope.userLocation']) { // 如果没有授权定位
            if (that.isFirstTime) { // 如果是第一次尝试
              // 弹出提示框询问用户是否授权
              uni.showModal({
                title: '提示',
                content: '需要获取您的地理位置信息',
                success: function(modalRes) {
                  if (modalRes.confirm) {
                    console.log('用户点击了确认')
                    // 用户点击了确认,尝试请求授权
                    uni.authorize({
                      scope: 'scope.userLocation',
                      success: function() {
                        // 授权成功,调用openMap方法
                        that.openMap()
                      },
                      fail: function() {
                        // 授权失败,可能是用户拒绝了,此时可以打开设置页面
                        that.openSetting()
                      }
                    })
                  }
                }
              })

              that.$store.commit('updateIsFirstTime', false) // 更新为已尝试授权
            } else {
              // 用户之前已经拒绝过授权,直接打开设置页面
              that.openSetting()
            }
          } else {
            // 已经授权,直接调用openMap方法
            that.openMap()
          }
        },
        fail: function(err) {
          // 获取设置失败的处理
          console.error('获取用户设置失败:', err)
          that.$u.toast('获取城市信息失败,请打开设置页面修改')
        }
      })
    },
    openSetting() {
      const that = this
      // 打开设置页面
      uni.openSetting({
        success: function(res) {
          if (res.authSetting['scope.userLocation']) {
            // 用户在设置页面打开了定位权限
            this.openMap()
          }
        },
        fail: function(err) {
          // 打开设置页面失败的处理
          console.error('打开设置页面失败:', err)
          that.$u.toast('获取城市信息失败,请打开设置页面修改')
        }
      })
    },
    openMap() {
      uni.chooseLocation({
        success: (res) => {
          console.log('用户选择的地址:', res)
          this.formData.village = res.name
          this.formData.address = res.address
          this.formData.longitude = res.longitude
          this.formData.latitude = res.latitude
          const map = new amapFile.AMapWX({
            key: 'f037f0a9966f01339818bbe2ec1c6495',
          })
          map.getRegeo({
            location: res.longitude + ',' + res.latitude,
            success: (data) => {
              this.formData.sheng = data[0].regeocodeData.addressComponent.province
              this.formData.shi = data[0].regeocodeData.addressComponent.city
              this.formData.qu = data[0].regeocodeData.addressComponent.district
            },
          })
        },
        fail: (err) => {
          console.log('选择位置失败:', err)
        }
      })
    },
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
调用地图 API 需要先获取到开发者密钥(AK),然后通过 HTTP 请求的方式发送请求,获取到对应地图数据。微信小程序中可以使用微信官方提供的地图组件 `<map>`,同时也可以使用第三方的地图组件。 以下是使用微信官方提供的地图组件 `<map>` 调用地图 API 的示例代码: ```xml <!-- 在 WXML 文件中引入地图组件 --> <map latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" /> <!-- 在 JS 文件中设置数据 --> Page({ data: { latitude: 39.915, longitude: 116.404, markers: [{ id: 0, latitude: 39.915, longitude: 116.404, title: 'Marker 1', iconPath: '/path/to/icon.png', width: 50, height: 50 }] }, onLoad: function() { // 发送 HTTP 请求获取地图数据 wx.request({ url: 'https://api.map.baidu.com/geocoder/v2/', data: { ak: 'your_ak', location: this.data.latitude + ',' + this.data.longitude, output: 'json', pois: 1 }, success: function(res) { console.log(res.data); } }); } }); ``` 其中,`<map>` 组件用于显示地图,`latitude` 和 `longitude` 分别用于设置地图的中心点坐标,`markers` 用于设置地图上的标记点。在 `onLoad` 函数中,通过 `wx.request` 发送 HTTP 请求获取地图数据,其中 `ak` 参数为开发者密钥,`location` 参数为要查询的地理位置坐标,`output` 参数为返回数据格式,`pois` 参数为是否返回周边信息。 注意:在使用地图 API 时,需要遵守 API 的使用规定,不得超过 API 的访问限制。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值