快捷導(dǎo)航

前端獲取用戶地理定位的方法及一些注意事項

更新時間：2025年02月28日 09:09:19 作者：眼鏡大馬猴

這篇文章主要介紹了移動端和PC端在使用定位過程中需要注意的事項,包括系統(tǒng)GPS打開、定位權(quán)限、頁面授權(quán)等,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言：

定位一般分為兩種場景：移動端和PC，下面分別講下這兩個場景在使用定位過程中的一些注意事項。

移動端
移動端包括手機，pad和其它帶有GPS定位芯片的智能設(shè)備（如手表、音箱等），移動端的系統(tǒng)包括iOS和Android。成功完成定位需要達成以下前提條件：
系統(tǒng)GPS打開
所使用的App或瀏覽器已獲取定位權(quán)限
對打開的頁面允許使用定位
對于iOS10以上系統(tǒng)和Android的一些版本已禁止在非HTTPS協(xié)議的域名下定位，請盡快將站點升級到HTTPS
PC端
因為pc設(shè)備上大都沒有GPS芯片，所以在PC上的定位主要通過IP精準(zhǔn)定位服務(wù)

1 GetCurrentPosition API

這是H5新推出的地理位置API，但從性能和精確度上來說相對較差，使用者幾乎沒有。

2 第三方服務(wù)

2.1 高德地圖服務(wù)

注意：在使用該服務(wù)前需要申請 Key 點擊前往申請

<!--
key:填寫申請的key
plugin：需要用的插件，如果不填寫將 AMap.xxx is not constructor 錯誤
-->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=[申請的key]&plugin=AMap.Geolocation"></script>

使用

let geolocation = new AMap.Geolocation({
    enableHighAccuracy: true, // 是否使用高精度定位
    timeout: 10000, // 超時時間，單位為毫秒
});
geolocation.getCurrentPosition(function(status, result) {
     if (status === 'complete') {
         console.log(result); // 定位成功
     } else {
         console.log(result);// 定位失敗
     }
 });

具體使用情況查看高德地圖手冊點擊跳轉(zhuǎn)

2.2 騰訊地圖服務(wù)

注意：在使用該服務(wù)前需要申請 Key 點擊前往申請

<!--
key:填寫申請的key
plugin：需要用的插件，如果不填寫將 AMap.xxx is not constructor 錯誤
-->
    <script type="text/javascript" src="https://apis.map.qq.com/tools/geolocation/min?key=[申請的key]&referer=location&callback=initMap"></script>

使用

 let geolocation = new qq.maps.Geolocation('[申請的key]');
 geolocation.getLocation((position)=> {
      console.log(position);
  }, (result)=> {
      console.log('獲取定位失敗', JSON.stringify(result));
  }, {
          timeout: 15000, // 默認值為10s;
          failTipFlag: true
  });