微信小程序根据坐标点解析地址常见报错:请求来源未被授权
功能需求
微信小程序提供的接口能夠獲取到當(dāng)前位置的坐標(biāo)(經(jīng)緯度),但是不能得到當(dāng)前位置的地址。或者從后臺獲取到坐標(biāo)(經(jīng)緯度)要解析成文字描述的地址小程序也沒有對應(yīng)的接口。
?
實現(xiàn)思路
這時候就需要通過騰訊位置服務(wù)來實現(xiàn),在這之前你得有騰訊位置服務(wù)的賬號和開發(fā)密鑰(key)。實現(xiàn)過程我就簡單貼出來,大家可以參看官網(wǎng)上的步驟,這里主要給大家解決兩個坑(見報錯處理)。
官網(wǎng):http://lbs.qq.com/index.html
?
關(guān)鍵代碼
// 引入SDK核心類 var QQMapWX = require('../../utils/js/qqmap-wx-jssdk.js'); var qqmapsdk;Page({onLoad: function () {// 實例化API核心類var qqmapsdk = new QQMapWX({key: 'xxxx-xxxx-xxxx-xxxx-xxxx-xxxx' // 開發(fā)密鑰(key)必填});},// 獲取當(dāng)前地理坐標(biāo)onReady: function () {var _this = this;wx.getLocation({type: 'gcj02',altitude: true,success: (res) => {var latitude = res.latitude // 經(jīng)度var longitude = res.longitude // 緯度// 根據(jù)坐標(biāo)調(diào)用 pointToAddress 方法_this.pointToAddress(latitude, longitude, function (address) {// 得到最終地址console.log(address);}}})},// 定義 pointToAddress 方法pointToAddress: function (latitude, longitude, callback) {var _this = this;// 調(diào)用接口qqmapsdk.reverseGeocoder({location: {latitude: latitude,longitude: longitude},success: function (res) {// 解析成功返回地址callback(res.result.address);},fail: function (res) {console.log(res);},complete: function (res) {console.log(res);}});}, })?
報錯處理
常見報錯(一)
報錯:http://apis.map.qq.com 不在以下 request 合法域名列表中
原因:出現(xiàn)這個報錯是因為你在小程序中發(fā)起了wx.request請求,但是請求的域名(http://apis.map.qq.com)沒有在微信公眾平臺后臺配置。
解決方法:配置request合法域名,把https://apis.map.qq.com添加到你的request合法域名中。(微信公眾平臺—設(shè)置—開發(fā)設(shè)置—服務(wù)器域名)。
Tips:添加后刷新項目,并重新編譯才會有效果,否則可能無效。
?
常見報錯(二)
報錯:請求來源未被授權(quán)
原因:沒有配置開發(fā)密鑰(key)或者配置錯誤。
解決方法:在騰訊位置服務(wù)平臺(https://lbs.qq.com/)設(shè)置開發(fā)密鑰(key)的 WebServiceAPI 授權(quán)IP。(控制臺—密鑰(key)管理—密鑰設(shè)置)。
第一步:勾選微信小程序,并填寫小程序ID。
第二步:勾選WebServiceAPI,并設(shè)置授權(quán)IP(你的服務(wù)器域名或IP)。
Tips:同樣添加后刷新項目,并重新編譯才會有效果,否則可能無效。
?
測試結(jié)果
測試沒問題,能取到數(shù)據(jù),并且零報錯。
Tips:這些方法不僅適用于坐標(biāo)解析(reverseGeocoder),還適用于距離計算(calculateDistance),地點搜索(search),獲取城市列表(getCityList)等等場景。
?
總結(jié)
以上是生活随笔為你收集整理的微信小程序根据坐标点解析地址常见报错:请求来源未被授权的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 小程序上让随机的两个点都显示在地图可视区
- 下一篇: 使用git将本地项目上传到github