当前位置:主页 > 小程序开发 > API >

微信小程序获取地理位置接口wx.getLocation

栏目:API 来源: 微信小程序开发网 阅读: 2017-03-23
  当我们进入到某一个微信小程序时,例如,进入到查询路径类的小程序里面时,一般小程序都会自动加载你所在位置的,然后,选择您所在位置的您要找的东西,比如,找旅馆、酒店等。

  这一看似简单的过程就是使用了获取地理位置的接口wx.getLocation,使用这个接口api可以获取用户的经度和纬度,有了经度和纬度自然就可以计算出您的座标,然后,再根据座标查找您所在位置的旅馆或酒店等信息。

  当用户离开小程序后,此接口无法调用;当用户点击“显示在聊天顶部”时,此接口可继续调用。

  这个接口调用成功后就会获取一个对象,这个对象里面包括经度和纬度等重要信息,这个对象如下所示:

  Object {latitude: 36.651216, longitude: 117.12, errMsg: "getLocation:ok"}

  只要把上面的原理弄明白了,那么,在以后做微信小程序开发时,遇到使用地理位置的就很容易使用了。


示例:

//.wxml
        <text class="page-body-text-small">当前位置经纬度</text>
        <block wx:if="{{hasLocation === false}}">
          <text class="page-body-text">未获取</text>
        </block>
        <block wx:if="{{hasLocation === true}}">
          <view class="page-body-text-location">
            <text>E: {{location.longitude[0]}}°{{location.longitude[1]}}′</text>
            <text>N: {{location.latitude[0]}}°{{location.latitude[1]}}′</text>
          </view>
        </block>
      </view>
      <view class="btn-area">
        <button type="primary" bindtap="getLocation">获取位置</button>
        <button bindtap="clear">清空</button>
      </view>

//.js
var formatLocation = util.formatLocation
Page({
  data: {
    hasLocation: false,
  },
  getLocation: function () {
    var that = this
    wx.getLocation({
      success: function (res) {
        that.setData({
          hasLocation: true,
          location: formatLocation(res.longitude, res.latitude)
        })
      }
    })
  },
  clear: function () {
    this.setData({
      hasLocation: false
    })
  }
})

经纬度

  由上面可以知道我们调用接口wx.getLocation后,如果调用成功返回的是经度和纬度,但是,我们要的结果是类似36°65′这样的包含几度几分,而返回的对象里面并没有几度几分,而只是一个带有小数点的经纬度,所以,必须对返回的结果进行处理。

处理方法:

  例如,把36.651216变成36°65′。

  我们要把上面这个数字精确到两位小数点,然后,把上面这个数字转换成字符串,然后,按小数点把上面的数字符串分割成两部分,然后,使用{{location.longitude[0]}}°{{location.longitude[1]}}′调用就得到了上面的结果。

  由上面的代码可以知道在获取到经纬度时,定义了一个js函数formatLocation,通过这个函数处理后,就得到了上面的我们需要的结果。

  这个函数正是上面我们分析的获取几度几分结果的函数,代码如下:

function formatLocation(longitude, latitude) {
  if (typeof longitude === 'string' && typeof latitude === 'string') {
    longitude = parseFloat(longitude)
    latitude = parseFloat(latitude)
  }

  longitude = longitude.toFixed(2)
  latitude = latitude.toFixed(2)

  return {
    longitude: longitude.toString().split('.'),
    latitude: latitude.toString().split('.')
  }
}


  toFixed:四舍五入,参数表示要四舍五入到位数。

  toString():表示要把浮点数转换为字符串,以便后面进行分割。

  split('.'):用小数点分割,这样得到的就是一个类似['36','65']的数组。

  这样通过setData函数把这个数组就赋给了data里面的变量location,在视图层就可以使用{{location.longitude[0]}}°{{location.longitude[1]}}′获取纬度为 36°65′了。