1. 程式人生 > >微信小程式獲取使用者位置以及城市

微信小程式獲取使用者位置以及城市

做小程式的時候,有需要維護使用者地理位置的地方,這時如果可以自動獲取當前位置,對於提升使用者體驗有很大的幫助,然後檢視官方文件,有個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//詳細地址,包括街道+門牌號
            })
          }
        })
      }
    })
  },