微信小程序定位

一、微信小程序的定位

微信小程序定位调用api文档：wx.getLocation。详细参考官方：https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html

 wx.getLocation({
      type: 'gcj02',
      success(res) {
        const latitude = res.latitude
        const longitude = res.longitude
        wx.openLocation({
          latitude,
          longitude
        })
      }
    })

坑点、注意点1：

在写入上方代码时，会发现我们还是无法使用定位功能。这时我们需要在app.json中增加入下代码：用来获取权限

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }

进入页面就会出现如下获取权限的弹框：

坑点、注意点2：

获取权限窗口后，我们点击确定后就可以获取到当前地址经纬度，往往我们会需要详细地址，可以在页面引入var QQMapWX = require(‘../../../utils/qqmap-wx-jssdk.min.js’),借助qqmapsdk = new QQMapWX({ key: API.MAP_KEY })。

let qqmapsdk = new QQMapWX({ key: API.MAP_KEY });
          wx.getLocation({
          type: 'gcj02',
          altitude: true,
          success: function (res) {
            console.log('获取经纬度', { ...res })
            qqmapsdk.reverseGeocoder({
              location: `${res.latitude},${res.longitude}`,
              success: function (e) {
                that.setData({
                  address: e.result.formatted_addresses.recommend,
                  latitude: res.latitude,
                  longitude: res.longitude
                })
                console.log('获取位置', { ...e });
              },
              fail: function (e) {
                console.log(e);
              },
              complete: function (e) {
                console.log(e);
              }
            })

坑点、注意点3：

在获取地理位置权限我们点击取消后会导致后面无法获取权限，并且往后想获取权限弹出框也不会再弹出（即微信小程序用户取消授权后，再次进入，不会再弹出授权提示框了），这里提供以下解决方式：（此次获取位置的方法并未封装可自行封装减少代码冗余）

wx.getSetting({
          success: (res) => {
                // scope.userLocation  == undefined代表用户未授权且第一次登陆
                console.log('检查地理位置信息是否授权', res.authSetting['scope.userLocation'])
                if (res.authSetting['scope.userLocation'] == undefined) {
                     //如果用户是第一次登陆且未授权的情况，会直接弹窗请求授权   
                     // 使用 getlocation 获取用户 经纬度位置
                     wx.getLocation({
                        type:'gcj02',
                        success(res){
                          console.log('获取经纬度', { ...res })
                          qqmapsdk.reverseGeocoder({
                            location: `${res.latitude},${res.longitude}`,
                            success: function (e) {
                                that.setData({
                                      address: e.result.formatted_addresses.recommend,
                                      latitude: res.latitude,
                                      longitude: res.longitude
                                    })
                                    console.log('获取位置', { ...e });
                              },
                              fail: function (res) {
                                    console.log(res);
                                    wx.showToast({
                                      title: '请确认定位是否开启',
                                      icon: 'none'
                                    })
                                  },
                          })
                        }      
                     })
                }
                 //如果点击确定会打开授权页请求二次授权
                else 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'
                            })
                          }else if(res.confirm){
                            wx.openSetting({
                              success: function (dataAu) {
                                if (dataAu.authSetting["scope.userLocation"] == true){
                                    //再次授权，调用getLocationt的API
                                    wx.getLocation({
                                      type:'gcj02',
                                      success(res){
                                        console.log('获取经纬度', { ...res })
                                        qqmapsdk.reverseGeocoder({
                                          location: `${res.latitude},${res.longitude}`,
                                          success: function (e) {
                                              that.setData({
                                                    address: e.result.formatted_addresses.recommend,
                                                    latitude: res.latitude,
                                                    longitude: res.longitude
                                                  })
                                                  console.log('获取位置', { ...e });
                                            },
                                            fail: function (res) {
                                                  console.log(res);
                                                  wx.showToast({
                                                    title: '请确认定位是否开启',
                                                    icon: 'none'
                                                  })
                                                },
                                        })
                                      }      
                                   })
                                }
                              }
                            })
                          }
                      }
                    })
                }else{
                  wx.getLocation({
                    type:'gcj02',
                    success(res){
                      console.log('获取经纬度', { ...res })
                      qqmapsdk.reverseGeocoder({
                        location: `${res.latitude},${res.longitude}`,
                        success: function (e) {
                            that.setData({
                                  address: e.result.formatted_addresses.recommend,
                                  latitude: res.latitude,
                                  longitude: res.longitude
                                })
                                console.log('获取位置', { ...e });
                          },
                          fail: function (res) {
                                console.log(res);
                                wx.showToast({
                                  title: '请确认定位是否开启',
                                  icon: 'none'
                                })
                              },
                      })
                    }      
                 })
                }
          }
        })

坑点、注意点4：

按照以上方法获取地址后，在线上版本时，我们记得要在微信小程序后台配置域名“https://apis.map.qq.com”

喜欢 (0)赏

[搞代码]

分享 (0)