微信小程序獲取當(dāng)前位置和城市名
2021-07-28 14:21:30

這篇文章主要介紹了微信小程序獲取當(dāng)前位置和城市名的思路,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

?

?

一、授權(quán)并獲取經(jīng)緯度

1， 獲取當(dāng)前地理位置，首先要拿到用戶的授權(quán)wx.openSetting；
2，微信的getLocation接口，獲取當(dāng)前用戶的地理位置（微信返回的是經(jīng)緯度，速度等參數(shù)）；
3，微信沒有將經(jīng)緯度直接轉(zhuǎn)換為地理位置，借用騰訊位置服務(wù)中關(guān)于微信小程序的地理轉(zhuǎn)換JS SDK 的API（返回信息中包括國(guó)家，省，市，區(qū)，經(jīng)緯度等地理位置）
步驟描述清楚以后，下面就開始按步驟操作了；（本文僅僅講述如何獲取用戶地理位置的授權(quán)）

圖示為獲取用戶地理位置授權(quán)彈窗

在用戶首次進(jìn)入某頁面（需要地理位置授權(quán)）時(shí)候，在頁面進(jìn)行onLoad，onShow時(shí)候，進(jìn)行調(diào)用wx.getLocation要求用戶進(jìn)行授權(quán)；以后每次進(jìn)入該頁面時(shí)，通過wx.getSetting接口，返回用戶授權(quán)具體信息。

wx.getSetting接口具體API地址鏈接為點(diǎn)擊打開鏈接

上圖中scope.userLocation就是地理授權(quán)的標(biāo)志；

當(dāng)該標(biāo)志是underfind，表示用戶初次進(jìn)入該頁面，當(dāng)該標(biāo)志是false，表示用戶初次進(jìn)入該頁面拒絕了地理授權(quán)，應(yīng)進(jìn)行重新要求獲取授權(quán)。

wx.getSetting({
   success: (res) => {
    console.log(JSON.stringify(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) {
     wx.showModal({
      title: '請(qǐng)求授權(quán)當(dāng)前位置',
      content: '需要獲取您的地理位置，請(qǐng)確認(rèn)授權(quán)',
      success: function (res) {
       if (res.cancel) {
        wx.showToast({
         title: '拒絕授權(quán)',
         icon: 'none',
         duration: 1000
        })
       } else if (res.confirm) {
        wx.openSetting({
         success: function (dataAu) {
          if (dataAu.authSetting["scope.userLocation"] == true) {
           wx.showToast({
            title: '授權(quán)成功',
            icon: 'success',
            duration: 1000
           })
           //再次授權(quán)，調(diào)用wx.getLocation的API
          } else {
           wx.showToast({
            title: '授權(quán)失敗',
            icon: 'none',
            duration: 1000
           })
          }
         }
        })
       }
      }
     })
    } else if (res.authSetting['scope.userLocation'] == undefined) {
     //調(diào)用wx.getLocation的API
    }
    else {
     //調(diào)用wx.getLocation的API
    }
   }
  })

在拿到用戶授權(quán)以后，使用微信的API獲取當(dāng)前位置的經(jīng)緯度鏈接: 微信獲取位置API

騰訊地圖API

簡(jiǎn)介

騰訊位置服務(wù)為微信小程序提供了基礎(chǔ)的標(biāo)點(diǎn)能力、線和圓的繪制接口等地圖組件和位置展示、地圖選點(diǎn)等地圖API位置服務(wù)能力支持，使得開發(fā)者可以自由地實(shí)現(xiàn)自己的微信小程序產(chǎn)品。 在此基礎(chǔ)上，騰訊位置服務(wù)微信小程序JavaScript SDK是專為小程序開發(fā)者提供的LBS數(shù)據(jù)服務(wù)工具包，可以在小程序中調(diào)用騰訊位置服務(wù)的POI檢索、關(guān)鍵詞輸入提示、地址解析、逆地址解析、行政區(qū)劃和距離計(jì)算等數(shù)據(jù)服務(wù)，讓您的小程序更強(qiáng)大

Hello world！

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

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

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

4、下載微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2
5、安全域名設(shè)置，在小程序管理后臺(tái) -> 開發(fā) -> 開發(fā)管理 -> 開發(fā)設(shè)置 -> “服務(wù)器域名” 中設(shè)置request合法域名，添加https://apis.map.qq.com

小程序示例

// 引入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.search({
            keyword: '酒店',
            success: function (res) {
                console.log(res);
            },
            fail: function (res) {
                console.log(res);
            },
        complete: function (res) {
            console.log(res);
        }
     });
  }
})

獲取當(dāng)前位置

wx.getLocation({
      isHighAccuracy: true,
      success(res) {
        let {latitude,longitude} = res
        // 調(diào)用騰訊地圖api獲取當(dāng)前位置
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: latitude,
            longitude: longitude
          },
          success: function (res) {
          	console.log(res.result)
          },
          fail: function (res) {
            console.log(res);
          },
          complete: function (res) {
            console.log(res);
          }
        });
      }
    })

使用限制
為了保證我們的服務(wù)穩(wěn)定，我們對(duì)每個(gè)key的每個(gè)服務(wù)接口的調(diào)用量做了如下限制：

日調(diào)用量：1萬次 / Key
并發(fā)數(shù)：5次 / key / 秒 。
超過日調(diào)用量和并發(fā)數(shù)的開發(fā)者，可通過以下途徑解決：
1.對(duì)于多頻次的相同請(qǐng)求，可通過緩存結(jié)果，并定時(shí)訪問更新的方式，減少對(duì)在線服務(wù)調(diào)用的依賴；
2.企業(yè)開發(fā)者的配額高于個(gè)人開發(fā)者，申請(qǐng)企業(yè)認(rèn)證后，需要在 控制臺(tái)->配額申請(qǐng) 中免費(fèi)申請(qǐng)你需要的配額。
我們將對(duì)您的申請(qǐng)進(jìn)行評(píng)估并進(jìn)行審批（3個(gè)工作日內(nèi)），審批通過后將會(huì)獲得您申請(qǐng)的配額。
3.對(duì)于切實(shí)需要大配額來滿足應(yīng)用需求的，請(qǐng)?jiān)诳刂婆_(tái)->配額管理中提交購(gòu)買配額申請(qǐng)，我們的商務(wù)會(huì)與您取得聯(lián)系。