Net微信網(wǎng)頁開發(fā) 使用微信JS-SDK獲取當(dāng)前地理位置過程詳解
前言:
前段時(shí)間有一個(gè)關(guān)于通過獲取用戶當(dāng)前經(jīng)緯度坐標(biāo),計(jì)算出該用戶距離某指定地點(diǎn)之間的距離。因?yàn)樽鲞@個(gè)項(xiàng)目需要能夠獲取到比較精確的經(jīng)緯度坐標(biāo),剛開始使用的是百度地圖結(jié)果發(fā)現(xiàn)百度地圖地位不太準(zhǔn)確(有時(shí)候相差的比較的大,后來了解到了百度獲取用戶經(jīng)緯度與用戶當(dāng)前使用的網(wǎng)絡(luò)有很大的關(guān)系),后來換成了高德地圖結(jié)果還是一樣。最后我想剛好做的是個(gè)微信網(wǎng)站項(xiàng)目,為什么不使用微信自帶接口呢?所以最后使用了微信JS-SDK來獲取用戶當(dāng)前地理位置的接口。
微信JS-SDK的使用步驟,配置信息的生成獲取講解:
關(guān)于JS-SDK的使用步驟和timestamp(時(shí)間戳),nonceStr(隨機(jī)串),signature(簽名),access_token(接口調(diào)用憑據(jù))生成獲取的詳細(xì)說明在此:https://www.cnblogs.com/Can-daydayup/p/11124092.html
前往微信公眾平臺(tái)查看是否開通獲取用戶地理位置接口權(quán)限:


調(diào)用微信JS-SDK獲取地理位置接口,獲取用戶當(dāng)前準(zhǔn)確經(jīng)緯度坐標(biāo):
微信官方文檔使用說明:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#35
< script type = "text/javascript" >
//通過config接口注入權(quán)限驗(yàn)證配置
wx.config({
debug: false,
// 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來,若要查看傳入的參數(shù),可以在pc端打開,參數(shù)信息會(huì)通過log打出,僅在pc端時(shí)才會(huì)打印。
appId: 'your AppId',
// 必填,公眾號(hào)的唯一標(biāo)識(shí)
timestamp: 'your timestamp',
// 必填,生成簽名的時(shí)間戳
nonceStr: 'your nonceStr',
// 必填,生成簽名的隨機(jī)串
signature: 'your signature',
// 必填,簽名
jsApiList: ['getLocation'] // 必填,需要使用的JS接口列表
});
//注意,我們的經(jīng)緯度坐標(biāo)是要在頁面加載完成后立即獲取,不需要觸發(fā)獲取,因此需要把獲取地理位置的接口放在ready(function(){});里面
wx.ready(function() {
try {
wx.getLocation({
type: 'wgs84',
// 默認(rèn)為wgs84的gps坐標(biāo),如果要返回直接給openLocation用的火星坐標(biāo),可傳入'gcj02'
success: function(res) {
var latitude = res.latitude; // 緯度,浮點(diǎn)數(shù),范圍為90 ~ -90
var longitude = res.longitude; // 經(jīng)度,浮點(diǎn)數(shù),范圍為180 ~ -180。
var speed = res.speed; // 速度,以米/每秒計(jì)
var accuracy = res.accuracy; // 位置精度
$("#Longitude").val(longitude);
$("#Latitude").val(latitude);
alert("微信經(jīng)緯度獲取結(jié)果:" + latitude + "經(jīng)度" + longitude);
}
});
} catch(e) {
console.log(e);
}
}); < /script>/
授權(quán)公眾號(hào),獲取當(dāng)前地理位置:

以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家
相關(guān)文章
使用JSX 建立 Markup 組件風(fēng)格開發(fā)的示例(前端組件化)
這篇文章主要介紹了使用JSX 建立 Markup 組件風(fēng)格開發(fā)的示例(前端組件化)本文重點(diǎn)講解如何從0搭建一個(gè)組件系統(tǒng),在這里我們會(huì)學(xué)習(xí)使用JSX來建立markup 的風(fēng)格,我們基于與React 一樣的 JSX 去建立我們組件的風(fēng)格2021-04-04
JavaScript實(shí)現(xiàn)拖拽網(wǎng)頁內(nèi)元素的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)拖拽網(wǎng)頁內(nèi)元素的方法,以注釋形式較為詳細(xì)的分析了javascript事件監(jiān)聽、元素定位的相關(guān)技巧,并配有詳細(xì)的注釋以便于理解,需要的朋友可以參考下2015-04-04
在JavaScript中使用for循環(huán)的方法詳解
在本文中,我們將學(xué)習(xí) JavaScript 中提供,的 for 循環(huán),我們將了解如何在 JavaScript 中使用 for...in 循環(huán)語句、其語法、工作原理示例、何時(shí)使用或避免使用它以及我們可以使用哪些其他類型的循環(huán),需要的朋友可以參考下2023-07-07
ionic進(jìn)入多級(jí)目錄后隱藏底部導(dǎo)航欄(tabs)的完美解決方案
這篇文章主要介紹了ionic進(jìn)入多級(jí)目錄后隱藏底部導(dǎo)航欄(tabs)的完美解決方案,在文章中用到了angularjs的指令知識(shí)點(diǎn),對(duì)ionic隱藏底部導(dǎo)航欄知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-11-11
javascript實(shí)現(xiàn)2016新年版日歷
這篇文章主要為大家介紹了javascript實(shí)現(xiàn)2016新年版日歷的詳細(xì)代碼,感興趣的小伙伴們可以參考一下2016-01-01

