記錄 vue 實現Web端的定位功能 獲取經緯度

首先我這裏的需求呢, 是獲取當前用戶的經緯度
通過無數次的測試, 前後用了 騰訊/百度地圖的api，最後絕對仍是高德的js APi
廢話很少說, 直接上代碼。

首先在 index.html 裏面 引入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申請的key"></script>

而後 去你須要獲取的頁面 開始寫, 我這裏拿來測試用,因此只有一個App.vue 文件。

貌似已經 很詳細了。
經過調用谷歌的api 能夠實現 準肯定位，

function onComplete(data){
 // 這裏面是 容許獲取位置服務後 發生的事情,這裏我直接獲取想要的信息
}

function onError(data){
  // 這裏面是獲取定位失敗後, 執行的事情,
  // 這裏我設置的是獲取失敗後， 啓用ip 定位
  // 可是有一點嗷，就是不太準確, 並且安卓微信上 通過測試,只能走這裏 。
}

下面上完整代碼：

methods: {
    getLocation() {
      let _this = this;
      AMap.plugin('AMap.Geolocation', function () {
        var geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默認：true
          enableHighAccuracy: true,
          // 設置定位超時時間，默認：無窮大
          timeout: 5000,
        })
        geolocation.getCurrentPosition()
        AMap.event.addListener(geolocation, 'complete', onComplete);
        AMap.event.addListener(geolocation, 'error', onError);
        // data是具體的定位信息
        function onComplete(data) {
          console.log('具體的定位信息',data)
        }
        function onError(data) {
          // 失敗 啓用 ip定位
          AMap.plugin('AMap.CitySearch', function () {
            var citySearch = new AMap.CitySearch();
            citySearch.getLocalCity(function (status, result) {
              if (status === 'complete' && result.info === 'OK') {
                  // 查詢成功，result即爲當前所在城市信息
                console.log('經過ip獲取當前城市：', result)
              }
            })
          })
        }
      })
    },
  },
  created () {
    // 此處爲調用精肯定位以後，調取ip定位，可根據實際狀況改寫
    this.getLocation();
 }

通過測試：

ios機型，在微信內置瀏覽器 或 其餘瀏覽器 能夠完美 精肯定位

安卓機型， 在微信內置瀏覽器 顯示定位失敗， 轉爲ip定位， 稍有誤差，但不會超級大，可是在其餘瀏覽器 能夠實現精肯定位。

具體緣由 尚未解決， 但願大佬們， 能夠提出建議 意見咯。

本人小菜雞一枚， 但願結識各路大佬~~~~

另外能夠相互學習喲， 這裏有個 槓精羣, 既能夠討論經驗技術,又能夠 吹牛嗷：