3.关于微信小程序地理位置方面的问题以及解决方案

1.如何获取用户地理位置的授权,以及如何在用户拒绝授权后进行二次设置授权
因为需求是页面需要获取经纬度以及地理位置
所以第一次授权放onLoad

wx.getLocation({
      type: 'wgs84',
      success(res) {
        let latitude = res.latitude
        let longitude = res.longitude
        that.setData({
          latitude ,
          longitude 
        })
      }
    })

如果用户第一次授权通过了就获取了经纬度可以用于后续调用腾讯地图sdk
如果用户拒绝位置授权则进入第二步

2.用户没有授权位置信息时,可以通过事件触发方法让用户自主打开位置授权,如果用户一直没有位置授权则事件一直有效

 // 获取地理位置 wx.getSetting() 获取用户权限设置     wx.openSetting() 打开微信自带权限设置页面
  choiceAddress() {
    let that = this;
    wx.getSetting({
      success: (res) => {
        console.log(JSON.stringify(res))
        console.log(res.authSetting['scope.userLocation'])
        if (res.authSetting['scope.userLocation'] != undefined &&
         res.authSetting['scope.userLocation'] != true) {
          wx.showModal({
            title: '请求授权当前位置',
            content: '需要获取您的地理位置,请确认授权',
            success: function (res) {
              if (res.cancel) {
                wx.showToast({
                  title: '拒绝授权',
                  icon: 'none',
                  duration: 1000
                })
              } else if (res.confirm) {
                wx.openSetting({
                  success: function (res) {
                    if (res.authSetting["scope.userLocation"] == true) {
                      wx.showToast({
                        title: '授权成功',
                        icon: 'none',
                        duration: 1000
                      })
                    } else {
                      wx.showToast({
                        title: '授权失败',
                        icon: 'none',
                        duration: 1000
                      })
                    }
                  }
                })
              }
            }
          })
        } 
      }
    })
  },

以上代码可以直接使用
至此位置信息授权就完成了

2.关于接入腾讯地图sdk获取位置详细信息(地址逆解析)
首先配置腾讯sdk,下面是腾讯位置服务控制台的配置
(1).小程序要选择WebServiceAPI
(2).小程序 APPID必填(白名单可以不用,如果后台调用的可以配)
(3).免费版同时调用只支持10次(如后台接口查询地址逆解析一次最多10条数据) 一天最大调用10000次
在这里插入图片描述

前面已经拿到了经纬度,现在去逆解析获取地址
首先去app.js 设置一个全局变量

//腾讯位置服务的key
 qqMapKey: '****',

然后去下载qqmap-wx-jssdk.js文件放在utils文件夹下面(腾讯地图服务里面有)
小程序单页面引入并使用

const app = getApp();
const QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
const qqmapsdk = new QQMapWX({
      key: app.globalData.qqMapKey
    });

    // 获取地址信息具体代码
              qqmapsdk.reverseGeocoder({
                location: {
                  latitude: data.latitude,
                  longitude: data.longitude,
                },
                success: function (res) {
                  console.log(res)
                  if (res.message == "query ok")
                    that.setData({
                      detailedAddress: res.result,
                    })
                },
                fail: function (res) {
                  console.log(res)
                }
              })
// detailedAddress就是逆解析出来的位置信息了

3.小程序唤起高德地图、腾讯地图做导航(简单)

 //点击定位唤起高德等app
  toLocation() {
    let that = this;
    wx.openLocation({
      latitude: Number(that.data.latitude),
      longitude: Number(that.data.longitude),
      name: that.data.shopName,
      address: that.data.detailedAddress.address,
    })
  },

方法参数如下
在这里插入图片描述

4.可以自己画地图等,包括一系列配置

希望能帮到大家,也便于自己记录(如果有帮助到大家可以点下赞哦~)!!!
如有疑问或者不对的地方可以下方评论留言讨论哦~会积极回复大家的!!!
在这里插入图片描述

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值