微信小程式獲取使用者位置以及城市
阿新 • • 發佈:2018-11-17
做小程式的時候,有需要維護使用者地理位置的地方,這時如果可以自動獲取當前位置,對於提升使用者體驗有很大的幫助,然後檢視官方文件,有個wx.getLocation介面,詳細說明如下:
wx.getLocation(Object object)
呼叫前需要 使用者授權 scope.userLocation
獲取當前的地理位置、速度。當用戶離開小程式後,此介面無法呼叫。
引數
Object object
屬性 | 型別 | 預設值 | 是否必填 | 說明 | 支援版本 |
---|---|---|---|---|---|
type | string | wgs84 | 否 | wgs84 返回 gps 座標,gcj02 返回可用於 wx.openLocation 的座標 | |
altitude | string | false | 否 | 傳入 true 會返回高度資訊,由於獲取高度需要較高精確度,會減慢介面返回速度 | >= 1.6.0 |
success | function | 否 | 介面呼叫成功的回撥函式 | ||
fail | function | 否 | 介面呼叫失敗的回撥函式 | ||
complete | function | 否 | 介面呼叫結束的回撥函式(呼叫成功、失敗都會執行) |
object.success 回撥函式
引數
Object res
屬性 | 型別 | 說明 | 支援版本 |
---|---|---|---|
latitude | number | 緯度,範圍為 -90~90,負數表示南緯 | |
longitude | number | 經度,範圍為 -180~180,負數表示西經 | |
speed | number | 速度,單位 m/s | |
accuracy | number | 位置的精確度 | |
altitude | number | 高度,單位 m | >= 1.2.0 |
verticalAccuracy | number | 垂直精度,單位 m(Android 無法獲取,返回 0) | >= 1.2.0 |
horizontalAccuracy | number | 水平精度,單位 m | >= 1.2.0 |
示例程式碼
wx.getLocation({
type: 'wgs84',
success (res) {
const latitude = res.latitude
const longitude = res.longitude
const speed = res.speed
const accuracy = res.accuracy
}
})
但是這個介面獲取到的只有經緯度,如果只是使用經緯度的話,那至此完畢,如果需要獲取當前城市以及街道的話,就需要用到騰訊地圖來幫忙了
騰訊地圖有個reverseGeocoder介面,可以根據使用者的經緯度獲取到城市的資訊,當然首先需要去官網註冊個賬號,新增Key才能使用
然後從官網下載個qqmap-wx-jssdk,引入到小程式頁面中,再呼叫介面就可以了,詳細程式碼附上
autogetadd:function(){
var that=this;
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
var qqmapsdk;
qqmapsdk = new QQMapWX({
key: '您的key'
});
wx.getLocation({
type: 'wgs84',
success: function (res) {
//2、根據座標獲取當前位置名稱,顯示在頂部:騰訊地圖逆地址解析
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success: function (addressRes) {
var regionOne = "region.0";
var regionTwo = "region.1";
var regionTherr = "region.2";
that.setData({
[regionOne]: addressRes.result.address_component.province,//省
[regionTwo]: addressRes.result.address_component.city,//市
[regionTherr]: addressRes.result.address_component.district,//區
userAddressdetail: addressRes.result.address_component.street + addressRes.result.address_component.street_number//詳細地址,包括街道+門牌號
})
}
})
}
})
},