微信小程序获取用户位置以及城市

做小程序的时候,有需要维护用户地理位置的地方,这时如果可以自动获取当前位置,对于提升用户体验有很大的帮助,然后查看官方文档,有个wx.getLocation接口,详细说明如下:

wx.getLocation(Object object)

调用前需要 用户授权 scope.userLocation

获取当前的地理位置、速度。当用户离开小程序后,此接口无法调用。

参数

Object object

属性类型默认值是否必填说明支持版本
typestringwgs84wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标 
altitudestringfalse传入 true 会返回高度信息,由于获取高度需要较高精确度,会减慢接口返回速度>= 1.6.0
successfunction 接口调用成功的回调函数 
failfunction 接口调用失败的回调函数 
completefunction 接口调用结束的回调函数(调用成功、失败都会执行) 

object.success 回调函数

参数

Object res

属性类型说明支持版本
latitudenumber纬度,范围为 -90~90,负数表示南纬 
longitudenumber经度,范围为 -180~180,负数表示西经 
speednumber速度,单位 m/s 
accuracynumber位置的精确度 
altitudenumber高度,单位 m>= 1.2.0
verticalAccuracynumber垂直精度,单位 m(Android 无法获取,返回 0)>= 1.2.0
horizontalAccuracynumber水平精度,单位 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//详细地址,包括街道+门牌号
            })
          }
        })
      }
    })
  },

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页