微信小程序?qū)崿F(xiàn)獲取準(zhǔn)確的騰訊定位地址功能示例
本文實(shí)例講述了微信小程序?qū)崿F(xiàn)獲取準(zhǔn)確的騰訊定位地址功能。分享給大家供大家參考,具體如下:
官方參考文檔:https://lbs.qq.com/qqmap_wx_jssdk/index.html
逆地址解析(坐標(biāo)位置描述)
1. 申請開發(fā)者密鑰(key)與設(shè)置
個人使用:登錄,點(diǎn)擊“key管理”,進(jìn)入設(shè)置,選擇“WebServiceAPI”,如果沒有小程序ID,勾選“授權(quán)IP”,如果有小程序ID,勾選“域名白名單”,且勾選“微信小程序”,輸入授權(quán)APPID。
https://lbs.qq.com/console/key.html
企業(yè)使用:登錄企業(yè)微信公眾號,選擇“開發(fā)”-“開發(fā)者工具”,開通“騰訊位置服務(wù)”,進(jìn)入后臺管理;點(diǎn)擊“key管理”,進(jìn)入設(shè)置,勾選所需要使用的企業(yè)名下的小程序ID,選擇“WebServiceAPI”,勾選“域名白名單”。
2. 下載微信小程序JavaScriptSDK
3. 添加小程序地理位置說明
2019年1月14日起新提交發(fā)布的版本若未填寫地理位置用途說明,則將無法正常調(diào)用地理位置相關(guān)接口,請及時填寫地理位置用途說明
相關(guān)文檔:https://developers.weixin.qq.com/community/develop/doc/000ea276b44928f7e8d73d0a65b801?idescene=6
在app.json中添加以下代碼
"permission": {
"scope.userLocation": {
"desc": "你的位置信息將用于小程序位置接口的效果展示"
}
}
4. JS 代碼
var QQMapWX = require('../../../page/common/sdk/qqmap-wx-jssdk.js');
var qqmapsdk = new QQMapWX({
key: 'Key'
});
console.log('signin')
const _this = this;
wx.getLocation({
type: 'gcj02',
success: function (res) {
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success: function (addressRes) { //成功后的回調(diào)
var addressRes = addressRes.result;
console.log( addressRes.address)
},
fail: function (error) {
console.error(error);
},
complete: function (addressRes) {
console.log(addressRes);
}
})
}
})
成功獲取到的信息截圖

微信開發(fā)者工具上進(jìn)行測試的時候,定位不準(zhǔn)確,需要啟用“真機(jī)調(diào)試”,在手機(jī)上即可準(zhǔn)確獲取定位信息。
5. 百度地圖坐標(biāo)轉(zhuǎn)化JS
實(shí)際應(yīng)用中發(fā)現(xiàn)騰訊地圖定位的坐標(biāo)不準(zhǔn)確,地址正確但定位坐標(biāo)相差很遠(yuǎn),后期在地圖上進(jìn)行展示的時候建議使用百度地圖,可以準(zhǔn)確的在地圖上顯示。
代碼寫在獲取地址成功調(diào)用里面。
var addressRes = addressRes.result; var x_pi = 3.14159265358979324 * 3000.0 / 180.0; var x = parseFloat(addressRes.location.lng); var y = parseFloat(addressRes.location.lat); var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi); var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi); var lng = z * Math.cos(theta) + 0.0065; var lat = z * Math.sin(theta) + 0.006; console.log(lng) console.log(lat)
希望本文所述對大家微信小程序設(shè)計有所幫助。
相關(guān)文章
一文詳解如何通過JavaScript動態(tài)修改元素的樣式
這篇文章主要介紹了如何通過JavaScript動態(tài)修改元素的樣式,三種方式分別是直接操作元素的style屬性、通過classList屬性添加或移除類名、以及使用CSSStyleDeclaration對象的setProperty方法,每種方法都有其適用場景,需要的朋友可以參考下2024-12-12
JavaScript實(shí)現(xiàn)動態(tài)表單生成
這篇文章主要來和大家一起深入探討如何使用JavaScript實(shí)現(xiàn)一個動態(tài)表單生成器,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下2024-01-01
JS設(shè)置手機(jī)驗證碼60s等待實(shí)現(xiàn)代碼
本文給大家分享JS設(shè)置手機(jī)驗證碼60s等待實(shí)現(xiàn)代碼,需要的朋友參考下吧2017-06-06
javascript校驗價格合法性實(shí)例(必須輸入2位小數(shù))
這篇文章主要介紹了javascript校驗價格合法性實(shí)例,其中價格必須是數(shù)字且必須輸入2位小數(shù),需要的朋友可以參考下2014-05-05

