获取定位信息

Remember_Ray

发布于 2020-10-29 11:07:59

2K0

发布于 2020-10-29 11:07:59

文章被收录于专栏：Ray学习笔记

官方文档-wx.getLocation 调用前需要用户授权 scope.userLocation

获取当前的地理位置、速度。当用户离开小程序后，此接口无法调用。开启高精度定位，接口耗时会增加，可指定 highAccuracyExpireTime 作为超时时间。地图相关使用的坐标格式应为 gcj02。

提示信息

全局配置-permission

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。

文件内容为一个 JSON 对象。

{
  "pages": ["pages/index/index"],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位
    }
  }
}

监听页面加载

/**
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) {
  wx.getLocation({
    // 参数
    type: 'wgs84',
    // 返回结果
    success(res) {
      console.log("res: ", res)
      const latitude = res.latitude
      const longitude = res.longitude
      const speed = res.speed
      const accuracy = res.accuracy
    }
  })

点击确定后，查看控制台输出信息

示例 - 获取地理位置信息

location.js

// miniprogram/components/action/action.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    nation: '',
    province: '',
    city: '',
    district: '',
    street: '',
    longitude: '',
    latitude: '',
    markers: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  /** 
   * 获取地理位置信息详细
   */
  getAddressDetail: function () {
    let that = this;
    wx.getLocation({
      type: 'wgs84',// 参考系
      isHighAccuracy: true, // 开启高精度定位
      highAccuracyExpireTime: 5000, // 高精度定位超时时间(ms)，指定时间内返回最高精度，该值3000ms以上高精度定位才有效果
      success: function (res) {
        var latitude = res.latitude;
        var longitude = res.longitude;
        console.log("纬度=" + latitude + " 经度=" + longitude);

        // 构建标注
        var marker = {
          id: 1,
          latitude: latitude,
          longitude: longitude,
          width: 50,
          height: 50
        }
        var markers = new Array();
        markers.push(marker);

        that.setData({ latitude: latitude, longitude: longitude, markers: markers });

        // 构建请求地址
        var qqMapApi = 'http://apis.map.qq.com/ws/geocoder/v1/' + "?location=" + latitude + ',' +
          longitude + "&key=" + 'YQHBZ-N73KO-ENBW6-SX4SO-S3RR2-56BIE' + "&get_poi=1";

        that.sendRequest(qqMapApi);
      }
    })
  },

  /**
   * 发送请求获取地图接口的返回值
   */
  sendRequest: function (qqMapApi) {
    let that = this;
    // 调用请求
    wx.request({
      url: qqMapApi,
      data: {},
      method: 'GET',
      success: (res) => {
        console.log(res)
        if (res.statusCode == 200 && res.data.status == 0) {
          // 从返回值中提取需要的业务地理信息数据
          that.setData({ nation: res.data.result.address_component.nation });
          that.setData({ province: res.data.result.address_component.province });
          that.setData({ city: res.data.result.address_component.city });
          that.setData({ district: res.data.result.address_component.district });
          that.setData({ street: res.data.result.address_component.street });
        }
      }
    })
  },
})

location.wxml

<!-- miniprogram/components/action/action.wxml -->
<form bindsubmit="bindSave">
  <view style='width:100%;padding-left:30rpx;font-size: 30rpx;margin-top:50rpx;'>
    1. 获取当前的位置：
    <button type="primary" open-type="getUserInfo" bindtap="getAddressDetail">授权位置</button>
    2. 输出结果：
    <view>国家:{{nation}}</view>
    <view>省份：{{province}}</view>
    <view>城市：{{city}}</view>
    <view>区：{{district}}</view>
    <view>街道：{{street}}</view>
    3. 地图渲染：
    <map id="hbkMap" style="width:90%;height:600rpx;" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}"></map>
  </view>
</form>