前端獲取用戶地理定位的方法及一些注意事項
更新時間：2025年02月28日 09:09:19 作者：眼鏡大馬猴
這篇文章主要介紹了移動端和PC端在使用定位過程中需要注意的事項,包括系統(tǒng)GPS打開、定位權限、頁面授權等,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
前言：
定位一般分為兩種場景：移動端和PC，下面分別講下這兩個場景在使用定位過程中的一些注意事項。
- 移動端
移動端包括手機，pad和其它帶有GPS定位芯片的智能設備（如手表、音箱等），移動端的系統(tǒng)包括iOS和Android。成功完成定位需要達成以下前提條件：
系統(tǒng)GPS打開
所使用的App或瀏覽器已獲取定位權限
對打開的頁面允許使用定位
對于iOS10以上系統(tǒng)和Android的一些版本已禁止在非HTTPS協(xié)議的域名下定位，請盡快將站點升級到HTTPS- PC端
因為pc設備上大都沒有GPS芯片，所以在PC上的定位主要通過IP精準定位服務
1 GetCurrentPosition API
這是H5新推出的地理位置API，但從性能和精確度上來說相對較差，使用者幾乎沒有。
2 第三方服務
2.1 高德地圖服務
注意：在使用該服務前需要申請 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);// 定位失敗
}
});
具體使用情況查看高德地圖手冊點擊跳轉
2.2 騰訊地圖服務
注意：在使用該服務前需要申請 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
});總結
到此這篇關于前端獲取用戶地理定位的方法及一些注意事項的文章就介紹到這了,更多相關前端獲取用戶地理定位內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
解決iframe的frameborder在chrome/ff/ie下的差異
最近的項目中使用了動態(tài)創(chuàng)建iframe的js方法，發(fā)現(xiàn)iframe.frameborder="0"在IE7下不管用，而chrome/ff都正常的，很是郁悶。2010-08-08
這篇文章主要介紹了利用JS實現(xiàn)頁面刪除并重新排序功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-12-12
這篇文章主要介紹了微信小程序傳值以及獲取值方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了通過實例了解Javascript柯里化流程,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了JS實現(xiàn)的表頭列頭固定頁面功能,涉及javascript針對頁面元素及表格樣式動態(tài)操作相關技巧,需要的朋友可以參考下2017-01-01
我們通常在使用cookie的時候一般都只是局限在本站內使用，也就是只在一個域名下使用2011-11-11
這篇文章主要介紹了js判斷變量初始化的三種形式及推薦用的形式,需要的朋友可以參考下2014-07-07
這篇文章主要給大家介紹了關于JavaScript數組常用的增刪改查與其他屬性的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
在ECMAScript5標準中，JavaScript提出了嚴格模式的概念（Strict Mode），本文就來和大家簡單講講JavaScript中嚴格模式的具體使用，感興趣的可以了解一下2023-05-05
微信小程序實現(xiàn)點擊文字頁面跳轉功能【附源碼下載】
這篇文章主要介紹了微信小程序實現(xiàn)點擊文字頁面跳轉功能,涉及navigator導航組件的簡單使用技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12