當(dāng)前位置:首頁 > IT技術(shù) > 微信平臺 > 正文

微信小程序獲取當(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(返回信息中包括國家,省,市,區(qū),經(jīng)緯度等地理位置)
步驟描述清楚以后,下面就開始按步驟操作了;(本文僅僅講述如何獲取用戶地理位置的授權(quán))

圖示為獲取用戶地理位置授權(quán)彈窗
微信小程序獲取當(dāng)前位置和城市名_騰訊地圖
在用戶首次進(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)擊打開鏈接
微信小程序獲取當(dāng)前位置和城市名_騰訊地圖_02
上圖中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: '請求授權(quán)當(dāng)前位置',
      content: '需要獲取您的地理位置,請確認(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
微信小程序獲取當(dāng)前位置和城市名_小程序_03

騰訊地圖API

簡介

騰訊位置服務(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、申請開發(fā)者密鑰(key): 申請密鑰

2、開通webserviceAPI服務(wù):控制臺 ->應(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è)置,在小程序管理后臺 -> 開發(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: '申請的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);
          }
        });
      }
    })

微信小程序獲取當(dāng)前位置和城市名_騰訊地圖_04

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

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

?

本文摘自 :https://blog.51cto.com/u

開通會員,享受整站包年服務(wù)立即開通 >