欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序地理定位功能實(shí)現(xiàn)

 更新時(shí)間:2024年05月30日 15:10:31   作者:曾凡玉@  
小程序地理定位是指通過(guò)小程序開發(fā)平臺(tái)提供的?API,來(lái)獲取用戶的地理位置信息,用戶在使用小程序時(shí),可以授權(quán)小程序獲取自己的地理位置信息,下面通過(guò)本文給大家分享微信小程序地理定位功能實(shí)現(xiàn),感興趣的朋友一起看看吧

1.地理定位介紹

小程序地理定位是指通過(guò)小程序開發(fā)平臺(tái)提供的 API,來(lái)獲取用戶的地理位置信息。用戶在使用小程序時(shí),可以授權(quán)小程序獲取自己的地理位置信息

wx.getLocation() :獲取當(dāng)前的地理位置

wx.chooseLocation():打開地圖選擇位置  

 1.1 申請(qǐng)開通

暫時(shí)只對(duì)部分類目的小程序開放,需要先通過(guò)類目審核,然后在小程序管理后臺(tái),「開發(fā)」-「開發(fā)管理」-「接口設(shè)置」中自助開通該接口權(quán)限。

1.2 使用方法

  • 在 app.json 中配置 requiredPrivateInfos 進(jìn)行聲明啟用
  • 在調(diào)用 wx.getLocation() 時(shí)需要在 app.json 配置 permission字段,同時(shí)使用 scope.userLocation 聲明收集用戶選擇的位置信息的目的,wx.chooseLocation() 接口不需要配置該字段,可以直接進(jìn)行調(diào)用
  • 在配置好以后,調(diào)用 wx.getLocation()wx.chooseLocation() 接口

app.json 中進(jìn)行配置

{
  "requiredPrivateInfos": [
    "getLocation",
    "chooseLocation"
  ],
  "permission": {
    "scope.userLocation": {
      "desc": "獲取用戶位置信息用于填寫收貨地址"
    }
  }
}

參考文檔:

地理位置接口新增與相關(guān)流程調(diào)整

permission 字段說(shuō)明

getLocation 使用 :

// 地理定位
async onLocation() {
  // 獲取 緯度 、精度
  const { latitude, longitude } = await wx.getLocation()
  console.log(location)
}

chooseLocation 使用:

// 地理定位
async onLocation() {
  // 打開地圖選擇位置,獲取 緯度 、精度
  const { latitude, longitude }  = await wx.chooseLocation()
  console.log(res)
}

2.拒絕授權(quán)后的解決方案  

在調(diào)用 wx.getLocation() 獲取用地理位置時(shí),如果用戶選擇拒絕授權(quán),代碼會(huì)直接拋出錯(cuò)誤。

在拒絕授權(quán)以后,再次調(diào)用 wx.getLocation() 時(shí),就不會(huì)在彈窗詢問(wèn)用戶是否允許授權(quán)。

接下來(lái),就需要優(yōu)化授權(quán)的流程:

 代碼如下:

方法里面的提示框,比如:wx.modal,wx.toast是自己在原生的基礎(chǔ)上進(jìn)一步封裝的,自己用的時(shí)候可以用原生的即可,以自身項(xiàng)目業(yè)務(wù)為準(zhǔn),以下代碼僅做參考:

// 獲取用戶地理位置信息
async onLocation() {
  // 調(diào)用 getSetting 方法獲取用戶所有的授權(quán)信息
  // 返回的 authSetting 包含小程序已向小程序申請(qǐng)過(guò)的權(quán)限已經(jīng)授權(quán)結(jié)果(true、false)
  const { authSetting } = await wx.getSetting()
  console.log(authSetting)
  // scope.userLocation 是否已經(jīng)授權(quán)獲取地理位置的信息
  // 如果之前沒(méi)有申請(qǐng)過(guò)返回 undefined,需要調(diào)用 getLocation
  // 如果之前同意了授權(quán),返回 true,需要調(diào)用 getLocation
  // 如果之前拒絕了授權(quán),返回 false,需要用戶手動(dòng)進(jìn)行授權(quán)
  // 等于 true,或者不等于 undefined,說(shuō)明需要進(jìn)行授權(quán)
  // const isAuth =
  //   authSetting['scope.userLocation'] ||
  //   authSetting['scope.userLocation'] === undefined
  // 為了避免冗余的條件判斷,使用 !! 把代碼進(jìn)行優(yōu)化
  const isAuth = !!authSetting['scope.userLocation']
  if (!isAuth) {
    // 彈窗詢問(wèn)用戶是否進(jìn)行授權(quán)
    const modalRes = await wx.modal({
      title: '授權(quán)提示',
      content: '需要需要您的地理位置信息,請(qǐng)確認(rèn)授權(quán)'
    })
    // 如果用戶點(diǎn)擊了取消,說(shuō)明用戶拒絕了授權(quán),給用戶提示
    if (!modalRes) return wx.toast({ title: '您拒絕了授權(quán)' })
    // 如果用戶點(diǎn)擊了確定,調(diào)用 wx.openSetting 打開微信客戶端小程序授權(quán)頁(yè)面
    // 并返回授權(quán)以后的結(jié)果
    const { authSetting } = await wx.openSetting()
    // 如果用戶沒(méi)有更新授權(quán)信息,提示沒(méi)有更新授權(quán)
    if (!authSetting['scope.userLocation'])
      return wx.toast({ title: '授權(quán)失敗!' })
    try {
      // 如果用戶更新授權(quán)信息,則調(diào)用 getLocation 獲取用戶地理位置信息
      const locationRes = await wx.getLocation()
      // 打印地理位置信息
      console.log(locationRes)
    } catch (err) {
      console.log(err)
    }
  } else {
    try {
      // 如果是第一次調(diào)用 getLocation 或者之前授權(quán)過(guò)
      // 直接調(diào)用 getLocation 獲取用戶信息即可
      const locationRes = await wx.getLocation()
      console.log(locationRes)
    } catch (error) {
      wx.toast({ title: '您拒絕授權(quán)獲取地址位置' })
    }
  }
}

3.開通騰訊位置服務(wù)

使用wx.chooseLocation()能夠很方便的讓用戶來(lái)選擇地理位置,但是wx.chooseLocation()返回的數(shù)據(jù)并沒(méi)有包含省市區(qū)、省市區(qū)編碼數(shù)據(jù)。

 這時(shí)候我們可以使用 騰訊位置服務(wù) 將返回的經(jīng)度、緯度進(jìn)行逆地址解析,轉(zhuǎn)換成詳細(xì)地址。

騰訊位置服務(wù)專為小程序開發(fā)提供了 JavaScript SDK,方便開發(fā)者在小程序中可以使用騰訊地圖服務(wù)。

使用騰訊位置服務(wù)可以很方便的讓開發(fā)者實(shí)現(xiàn)地址解析、逆地址解析等功能。

使用步驟:

申請(qǐng)開發(fā)者密鑰(key):申請(qǐng)密鑰

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

下載微信小程序 JavaScriptSDK,微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2

安全域名設(shè)置

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

添加 https://apis.map.qq.com

詳細(xì)步驟:

1.申請(qǐng)密鑰:密鑰申請(qǐng),微信掃碼進(jìn)行登錄,選擇綁定已有賬號(hào)、或者注冊(cè)新賬號(hào) (需要綁定手機(jī)、驗(yàn)證郵箱)

2. 開通webserviceAPI服務(wù):控制臺(tái) ->應(yīng)用管理 -> 我的應(yīng)用 ->添加key-> 勾選WebServiceAPI -> 保存→ 創(chuàng)建完成

 3.下載微信小程序 JavaScriptSDK v1.2,下載將 .js 文件放到小程序的 libs 目錄下  

4.安全域名設(shè)置,在小程序管理后臺(tái) -> 開發(fā) -> 開發(fā)管理 -> 開發(fā)設(shè)置 -> “服務(wù)器域名” 中設(shè)置request合法域名,添加https://apis.map.qq.com,或者點(diǎn)擊微信開發(fā)者工具中的暫時(shí)不校驗(yàn)域名

4.LBS 逆地址解析

LBS 逆地址解析是指通過(guò)地理坐標(biāo)查找對(duì)應(yīng)位置的詳細(xì)地址信息。LBS 是 Location-Based Services 的縮寫,翻譯為中文就是基于地理位置的服務(wù)。

對(duì)于 LBS 逆地址解析,通常是輸入地理坐標(biāo)(經(jīng)度和緯度),系統(tǒng)會(huì)返回地理位置的具體地址,如國(guó)家、省份、城市、街道、建筑等信息。

比如說(shuō),你有一個(gè)經(jīng)緯度為(114.21892734521,29.575429778924)的坐標(biāo),通過(guò) LBS 逆地址解析,你可以得到這個(gè)坐標(biāo)對(duì)應(yīng)的實(shí)際地址,可能是 "中國(guó)湖北省武漢市XXX區(qū)XXX路XXX號(hào)"。

使用步驟:

在項(xiàng)目中引入 SDK 核心類(上面已經(jīng)下載的微信小程序JavaScriptSDK)

// var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
//這個(gè)地址看自己項(xiàng)目,一般是在工作目錄的根目錄下建libs文件夾,哪里需要在哪引入即可
import QQMapWX from '../../../../../libs/qqmap-wx-jssdk.min'

onLoad 中實(shí)例化 API 核心類,同時(shí)配置創(chuàng)建的 key

// 引入SDK核心類,js文件根據(jù)自己業(yè)務(wù),位置可自行放置
import QQMapWX from '../../../../../libs/qqmap-wx-jssdk.min'
Page({
  onLoad: function () {
    // 實(shí)例化API核心類,把實(shí)例掛載到this上,方便其他方法中使用
    this.qqmapsdk = new QQMapWX({
      key: '申請(qǐng)的key'
    })
  }
  // coding...   
}

使用實(shí)例方法 reverseGeocoder 方法進(jìn)行逆地址解析,將提供的坐標(biāo)轉(zhuǎn)換為詳細(xì)的地址位置信息 

// LBS 地址逆解析
// 地理定位
async onLocation() {
  // 獲取 緯度 、精度
  // const { latitude, longitude } = await wx.getLocation()
  // console.log(location)
  // 獲取經(jīng)、緯度、name用戶搜索的地點(diǎn)名稱
  let { latitude, longitude, name } = await wx.chooseLocation()
  // 使用 reverseGeocoder 方法進(jìn)行逆地址解析
  this.qqmapsdk.reverseGeocoder({
    // 傳入經(jīng)、緯度
    location: {
      latitude,
      longitude
    },
    // 逆地址解析成功后執(zhí)行
    success: (res) => {
      // 獲取選擇的
      const { street_number } = res.result.address_component
      // province 省  city 市  district 區(qū)
      const {
        province, // 省
        city, // 市
        district, // 區(qū)
        adcode, // 行政區(qū)劃代碼
        city_code, // 城市代碼,由國(guó)家碼+行政區(qū)劃代碼(提出城市級(jí)別)組合而來(lái),總共為9位
        nation_code // 國(guó)家代碼
      } = res.result.ad_info
      this.setData({
        // 省級(jí): 前兩位有值,后4位置0,如,河北省: 130000
        provinceCode: adcode.replace(adcode.substring(2, 6), '0000'),
        provinceName: province,
        // 市前面多個(gè)國(guó)家代碼,需要進(jìn)行截取
        cityCode: city_code.slice(nation_code.length),
        cityName: city,
        // 東莞市、中山市、修州市、嘉關(guān)市 因其下無(wú)區(qū)縣級(jí),
        districtCode: district && adcode,
        districtName: district,
        // 詳細(xì)地址
        address: name,
        fullAddress: [province, city, district, address].join('')
      })
    }
  })
}

注意事項(xiàng):

逆地址解析解析初始用的時(shí)候發(fā)現(xiàn)解析不成功,需要配置接口的調(diào)用額度:

官方文檔-基礎(chǔ)示例:Hello World

官方文檔-逆地址解析:reverseGeocoder

到此這篇關(guān)于微信小程序之地理定位功能的文章就介紹到這了,更多相關(guān)微信小程序地理定位內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論