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

做小程序的时候,有需要维护用户地理位置的地方,这时如果可以自动获取当前位置,对于提升用户体验有很大的帮助,然后查看官方文档,有个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//详细地址,包括街道+门牌号
            })
          }
        })
      }
    })
  },

猜你喜欢

转载自blog.csdn.net/duoduozk/article/details/83928061