h5获取地理坐标

h5获取地理坐标

 方法：h5自带获取地理信息的api

api：navigator.geolocation.getCurrentPosition

　　https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition

代码：（vue，iview）

getLocation () { // 检测是否支持地理定位 如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
      if (navigator.geolocation) { // 如果getCurrentPosition()运行成功， //则向参数showPosition中规定的函数返回一个coordinates对象
        navigator.geolocation.getCurrentPosition((position) => {
          this.lon = position.coords.longitude
          this.lat = position.coords.latitude
        }, error => {
          switch (JSON.stringify(error.code)) {
            case 1:
              this.$Message.error('地理位置信息的获取失败，因为该页面没有获取地理位置信息的权限。')
              break
            case 2:
              this.$Message.error('地理位置获取失败，因为至少有一个内部位置源返回一个内部错误。')
              break
            case 3:
              this.$Message.error('获取地理位置的超时时长。')
              break
            default:
              this.$Message.error('地理位置信息的获取失败，因为该页面没有获取地理位置信息的权限。')
          }
        })
      } else {
        this.$Message.error('对不起，您的浏览器不支持地理位置定位')
      }
    }

注释：

经测试大部分浏览器可用，但微信内置浏览器问题会有问题。微信需要使用weixin-js-sdk中的wx.getLocatio()方法。

上述函数在微信内置浏览器中会返回报错：地理位置信息的获取失败，因为该页面没有获取地理位置信息的权限。

 

钻研不易，转载请注明出处......