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()方法。

上述函數在微信內置瀏覽器中會返回報錯：地理位置信息的獲取失敗，因為該頁面沒有獲取地理位置信息的權限。

 

鑽研不易，轉載請注明出處......