HTML5 地理定位-geolocation

话不多说，直接上代码

注意：注重用户隐私，请求定位的时候，会弹出一个提示框，如果你选择了不允许，下次再进入的时候就不会有请求定位权限的提示框了，浏览器会把这个站点的操作记录下来，不清楚缓存时间，在app上试了很久，一旦拒绝是真一点办法也没有，缓存是真强

支持：Android 2.0+、IOS 3.0+；Firefox、Opera、Internet Explorer、Chrome、Safari…
注意：在IOS 10中，苹果对webkit定位权限进行了修改，所有定位请求的页面必须是https协议的。如果是非https网页，在http协议下通过html5原生定位接口会返回错误，也就是无法正常定位到用户的具体位置，而已经支持https的网站则不会受影响。
解决：升级站点到HTPPS或者调用第三方(高德/腾讯/百度…)

export const getLocationH5 = function  () {
  // 方法是异步的，使用promise同步化一下，逻辑在then里面处理
  return new Promise((resolve, reject) => {
    console.log('navigator', navigator); // 提供当前浏览器及操作系统等信息，也是window对象中的成员
    if (navigator.geolocation) {
    // getCurrentPosition(成功回调, 失败回调, options--可指定三个参数)
      navigator.geolocation.getCurrentPosition(function (position) {
      	console.log(position)
      	let location = {}
      	location.lat = position.coords.latitude // 纬度
    	location.lng = position.coords.longitude // 经度
        resolve(location )
      }, function (error) {
        var errorMessage = ''
        switch (error.code) {
          case error.PERMISSION_DENIED:
            errorMessage = '用户拒绝对获取地理位置的请求'
            break
          case error.POSITION_UNAVAILABLE:
            errorMessage = '位置信息是不可用的'
            break
          case error.TIMEOUT:
            errorMessage = '请求用户地理位置超时'
            break
          case error.UNKNOWN_ERROR:
            errorMessage = '未知错误'
            break
        }
        reject(errorMessage)
      }, {
        enableHighAcuracy: false, // 指示浏览器获取高精度的位置，默认为false，设置true可能会导致响应时间变慢，在手机上耗电快
        timeout: 5000, // 指定获取地理位置的超时时间，默认不限时，单位为毫秒
        maximumAge: 3000 // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。
      })
    } else {
      reject('你的浏览器不支持当前地理位置信息获取')
    }
  })
}

页面调用：

  getPosition().then(res => {
  	// 逻辑处理
    console.log('定位数据+', res);
  }).catch((error) => {
  	// 错误信息
    console.log('定位error+', error);
  })