1. 程式人生 > >Net微信網頁開發之使用微信JS-SDK獲取當前地理位置

Net微信網頁開發之使用微信JS-SDK獲取當前地理位置

前言:

  前段時間有一個關於通過獲取使用者當前經緯度座標,計算出該使用者距離某指定地點之間的距離。因為做這個專案需要能夠獲取到比較精確的經緯度座標,剛開始使用的是百度地圖結果發現百度地圖地位不太準確(有時候相差的比較的大,後來瞭解到了百度獲取使用者經緯度與使用者當前使用的網路有很大的關係),後來換成了高德地圖結果還是一樣。最後我想剛好做的是個微信網站專案,為什麼不使用微信自帶介面呢?所以最後使用了微信JS-SDK來獲取使用者當前地理位置的介面。

微信JS-SDK的使用步驟,配置資訊的生成獲取講解:

  關於JS-SDK的使用步驟和timestamp(時間戳),nonceStr(隨機串),signature(簽名),access_token(介面呼叫憑據)生成獲取的詳細說明在此:https://www.cnblogs.com/Can-daydayup/p/11124092.html

前往微信公眾平臺檢視是否開通獲取使用者地理位置介面許可權:

 

 

呼叫微信JS-SDK獲取地理位置介面,獲取使用者當前準確經緯度座標:

微信官方文件使用說明:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#35

<script type="text/javascript">
//通過config介面注入許可權驗證配置
wx.config({
debug:false, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來,若要檢視傳入的引數,可以在pc端開啟,引數資訊會通過log打出,僅在pc端時才會列印。
appId:'your AppId', // 必填,公眾號的唯一標識
timestamp:'your timestamp', // 必填,生成簽名的時間戳
nonceStr:'your nonceStr', // 必填,生成簽名的隨機串
signature:'your signature',// 必填,簽名
jsApiList: ['getLocation'] // 必填,需要使用的JS介面列表
});

 
//注意,我們的經緯度座標是要在頁面載入完成後立即獲取,不需要觸發獲取,因此需要把獲取地理位置的介面放在ready(function(){});裡面
wx.ready(function ()
{
try {
wx.getLocation({
type: 'wgs84', // 預設為wgs84的gps座標,如果要返回直接給openLocation用的火星座標,可傳入'gcj02'
success: function (res) { 

var latitude = res.latitude; // 緯度,浮點數,範圍為90 ~ -90
var longitude = res.longitude; // 經度,浮點數,範圍為180 ~ -180。
var speed = res.speed; // 速度,以米/每秒計
var accuracy = res.accuracy; // 位置精度
$("#Longitude").val(longitude);
$("#Latitude").val(latitude);
alert("微信經緯度獲取結果:" + latitude + "經度" + longitude);
}
});
}
catch (e) 
{
console.log(e);
}
});
</script>

 授權公眾號,獲取當前地理位置:

&n