快捷導(dǎo)航

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

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

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

前言：

定位一般分為兩種場(chǎng)景：移動(dòng)端和PC，下面分別講下這兩個(gè)場(chǎng)景在使用定位過(guò)程中的一些注意事項(xiàng)。

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

1 GetCurrentPosition API

這是H5新推出的地理位置API，但從性能和精確度上來(lái)說(shuō)相對(duì)較差，使用者幾乎沒(méi)有。

2 第三方服務(wù)

2.1 高德地圖服務(wù)

注意：在使用該服務(wù)前需要申請(qǐng) Key 點(diǎn)擊前往申請(qǐng)

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

使用

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

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

2.2 騰訊地圖服務(wù)

注意：在使用該服務(wù)前需要申請(qǐng) Key 點(diǎn)擊前往申請(qǐng)

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

使用

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