快捷導(dǎo)航

微信小程序獲取當(dāng)前位置的詳細(xì)步驟

更新時(shí)間：2022年12月08日 08:53:37 作者：早起的年輕人

微信小程序開發(fā)中選擇地理位置就需要通過官方文檔API去判斷用戶是否授權(quán)地理位置,用戶開啟授權(quán)后可直接獲取地理位置,下面這篇文章主要給大家介紹了關(guān)于微信小程序獲取當(dāng)前位置的詳細(xì)步驟,需要的朋友可以參考下

1 騰訊位置開發(fā)基本步驟

1.1 申請(qǐng)開發(fā)者密鑰（key）

申請(qǐng)密鑰：登錄騰訊開發(fā)者平臺(tái)，然后創(chuàng)建應(yīng)用，如下圖

開通webserviceAPI服務(wù)：控制臺(tái) ->應(yīng)用管理 -> 我的應(yīng)用 ->添加key-> 勾選WebServiceAPI -> 保存

(小程序SDK需要用到webserviceAPI的部分服務(wù)，所以使用該功能的KEY需要具備相應(yīng)的權(quán)限)

1.2 下載微信小程序JavaScriptSDK

下載微信小程序JavaScriptSDK

https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.2.zip

下載后解壓，拷貝到微信小程序項(xiàng)目中

1.3 安全域名設(shè)置

安全域名設(shè)置，在小程序管理后臺(tái) -> 開發(fā) -> 開發(fā)管理 -> 開發(fā)設(shè)置 -> “服務(wù)器域名” 中設(shè)置request合法域名，添加

https://apis.map.qq.com

1.4 微信小程序設(shè)置隱私權(quán)限

在app.json 文本中添加

  "permission": {
    "scope.userLocation": {
      "desc": "小程序需要使用您的位置信息 已確認(rèn)您的采樣地址"
    }
  },
  "requiredPrivateInfos": [
    "getLocation"
  ],

getLocation 是使用微信接口來獲取經(jīng)緯度時(shí)使用，需要申請(qǐng)調(diào)用權(quán)限。

2 獲取位置信息

核心代碼如下：

// 引入SDK核心類，js文件根據(jù)自己業(yè)務(wù)，位置可自行放置
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
 
    onLoad: function () {
        // 實(shí)例化API核心類
        qqmapsdk = new QQMapWX({
            key: '申請(qǐng)的key'
        });
    },
    onShow: function () {
        // 調(diào)用接口
        qqmapsdk.reverseGeocoder({
            success: function (res) {
                let result = res.result;
                console.log(res.status, res.message);
            },
            fail: function (res) {
                console.log(res.status, res.message);
            },
            complete: function (res) {
            console.log(res.status, res.message);
        }
     });
  }
})

3 權(quán)限問題

當(dāng)用戶第一次進(jìn)入頁面獲取位位置信息時(shí)，小程序會(huì)彈出請(qǐng)求位置權(quán)限申請(qǐng)，如果用戶點(diǎn)擊了拒絕權(quán)限，那下次進(jìn)入時(shí)，將不會(huì)再次彈出權(quán)限申請(qǐng)，所以這個(gè)過程需要開發(fā)者來維護(hù)處理一下。

如果用戶拒絕過，再次進(jìn)入后，彈框提示用戶開啟權(quán)限

  //定位方法
  initLocationPersmiss: function () {
    var _this = this;
    wx.getSetting({
      success: (res) => {
        // res.authSetting['scope.userLocation'] == undefined  表示 初始化進(jìn)入該頁面
        // res.authSetting['scope.userLocation'] == false  表示 非初始化進(jìn)入該頁面,且未授權(quán)
        // res.authSetting['scope.userLocation'] == true  表示 地理位置授權(quán)
        if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
          //未授權(quán)
          wx.showModal({
            title: '請(qǐng)求授權(quán)當(dāng)前位置',
            content: '需要獲取您的地理位置，請(qǐng)確認(rèn)授權(quán)',
            success: function (res) {
              if (res.cancel) {
                //取消授權(quán)
                wx.showToast({
                  title: '拒絕授權(quán) 暫時(shí)無法使用本功能',
                  icon: 'none',
                  duration: 1000
                })
              } else if (res.confirm) {
                //確定授權(quán)，通過wx.openSetting發(fā)起授權(quán)請(qǐng)求
                wx.openSetting({
                  success: function (res) {
                    if (res.authSetting["scope.userLocation"] == true) {
                      wx.showToast({
                        title: '授權(quán)成功',
                        icon: 'success',
                        duration: 1000
                      })
                      //再次授權(quán)，調(diào)用wx.getLocation的API
                      _this.initGetLocationFlunction();
                    } else {
                      wx.showToast({
                        title: '授權(quán)失敗',
                        icon: 'none',
                        duration: 1000
                      })
                    }
                  }
                })
              }
            }
          })
        } else if (res.authSetting['scope.userLocation'] == undefined) {
          //用戶首次進(jìn)入頁面,調(diào)用wx.getLocation的API
          _this.initGetLocationFlunction();
        } else {
          console.log('授權(quán)成功')
          //調(diào)用wx.getLocation的API
          _this.initGetLocationFlunction();
        }
      }
    })

  },

獲取位置的請(qǐng)求

initGetLocationFlunction(isRefresh){
    let that = this;
    this.setData({isUpdateLocatin:true})
    qqmapsdk.reverseGeocoder({
      success: function(res) {
        let result = res.result;
        console.log(res);
      },
      fail: function(res) {
        console.log(res.status, res.message);
       
      },
      complete: function(res) {
        console.log(res.status, res.message);
      }
    })
  },

完畢