小程序GPS定位

微信在基础库1.4.0开始的picker组件添加了省市区组件,再也不用自己调用地图数据做三级联动了。

但是并没有提供一键定位方法,那么就自己配合高德api做了一个

需要获取小程序的定位信息,然后交给高德逆地理编码


前期配置:

小程序获取定位api

https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html#wxgetlocationobject


高德web api的文档

http://lbs.amap.com/api/webservice/guide/api/georegeo


申请高德web api的用户key(注意高德不同服务需要不同的key哦)

http://lbs.amap.com/dev/key


js

const app = getApp()
Page({
  data: {
    region: ["北京市", "北京市", "东城区"],
    key: app.data.webkey, //填入申请的amap webapp 可以缓存在app.js中
    address: ''
  },
  onLoad: function() {
    var that = this;
    that.getGPS()
  },
  getGPS: function(e) {
    var that = this;
    wx.getLocation({
      type: 'wgs84',
      success: function(res) {
        var $location = res.longitude + ',' + res.latitude //创建amap使用的经纬度数据。'经度,维度'
        that.getAddress($location)
      }
    })
  },
  getAddress: function($data) {
    let that = this
    wx.request({
      url: 'https://restapi.amap.com/v3/geocode/regeo', //api
      method: 'GET',
      data: {
        key: that.data.key, //webkey
        location: $data //经纬度
      },
      success: function(res) {
        console.log(res)
        if (res.data.status === '1') {
          //获取返回数据中需要的字段
          let $res = res.data.regeocode.addressComponent
          let $country = $res.country
          let $province = $res.province
          let $city = $res.city
          let $district = $res.district
          let $region = [$province, $city, $district]
          //截取除省市区外所需要的地址信息
          let $pcd = $province + $city + $district
          let $address = res.data.regeocode.formatted_address.substr($pcd.length)
          that.setData({
            region: $region,
            address: $address
          })
        } else {
          //error
        }
      },
      fail: function(error) {
        // error...
      }
    })
  },
  bindRegionChange: function(e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      region: e.detail.value
    })
  },
})


你可能感兴趣的:(小程序,GPS)