微信小程序獲取當前位置的詳細步驟

Posted on by

微信小程序獲取位置信息的方式有兩種，一種是調用微信官方的接口來獲取，如getLocation,這種方式隻能獲取經緯度
微信官方文檔

https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html

另一種是使用的第三方平臺的，比如本文章使用的是 騰訊地圖

微信小程序JavaScript SDK / 開發指南 / 入門及使用限制-開發文檔

https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

1 騰訊位置開發基本步驟

1.1 申請開發者密鑰（key）

申請密鑰 ：登錄騰訊開發者平臺，然後創建應用，如下圖

開通webserviceAPI服務：控制臺 ->應用管理 -> 我的應用 ->添加key-> 勾選WebServiceAPI -> 保存

(小程序SDK需要用到webserviceAPI的部分服務，所以使用該功能的KEY需要具備相應的權限)

1.2 下載微信小程序JavaScriptSDK

下載微信小程序JavaScriptSDK

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

下載後解壓，拷貝到微信小程序項目中

1.3 安全域名設置

安全域名設置，在小程序管理後臺 -> 開發 -> 開發管理 -> 開發設置 -> “服務器域名” 中設置request合法域名，添加

https://apis.map.qq.com

1.4 微信小程序設置隱私權限

在app.json 文本中添加

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

getLocation 是使用微信接口來獲取經緯度時使用，需要申請調用權限。

2 獲取位置信息

核心代碼如下：

// 引入SDK核心類，js文件根據自己業務，位置可自行放置
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
 
    onLoad: function () {
        // 實例化API核心類
        qqmapsdk = new QQMapWX({
            key: '申請的key'
        });
    },
    onShow: function () {
        // 調用接口
        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 權限問題

當用戶第一次進入頁面獲取位位置信息時，小程序會彈出請求位置權限申請，如果用戶點擊瞭拒絕權限，那下次進入時，將不會再次彈出權限申請，所以這個過程需要開發者來維護處理一下。

如果用戶拒絕過，再次進入後，彈框提示用戶開啟權限

  //定位方法
  initLocationPersmiss: function () {
    var _this = this;
    wx.getSetting({
      success: (res) => {
        // res.authSetting['scope.userLocation'] == undefined  表示 初始化進入該頁面
        // res.authSetting['scope.userLocation'] == false  表示 非初始化進入該頁面,且未授權
        // res.authSetting['scope.userLocation'] == true  表示 地理位置授權
        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發起授權請求
                wx.openSetting({
                  success: function (res) {
                    if (res.authSetting["scope.userLocation"] == true) {
                      wx.showToast({
                        title: '授權成功',
                        icon: 'success',
                        duration: 1000
                      })
                      //再次授權，調用wx.getLocation的API
                      _this.initGetLocationFlunction();
                    } else {
                      wx.showToast({
                        title: '授權失敗',
                        icon: 'none',
                        duration: 1000
                      })
                    }
                  }
                })
              }
            }
          })
        } else if (res.authSetting['scope.userLocation'] == undefined) {
          //用戶首次進入頁面,調用wx.getLocation的API
          _this.initGetLocationFlunction();
        } else {
          console.log('授權成功')
          //調用wx.getLocation的API
          _this.initGetLocationFlunction();
        }
      }
    })

  },

獲取位置的請求

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);
      }
    })
  },

完畢

總結

到此這篇關於微信小程序獲取當前位置的文章就介紹到這瞭,更多相關微信小程序獲取當前位置內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：