整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
前面文章中寫過類似的文章《手把手教你HTML5實現(xiàn)根據(jù)LBS定位到商家兩點之間距離多少》，建議有興趣的小伙伴可以看看。
各種瀏覽器對HTML5 Geolocation 的支持
瀏覽器 版本 只支持HTTPS版本 IE 9+ - Edge 12+ - Firefox 3.5+ - Chrome 5+ 50+ Safari 5+ 39+ iOS Safari 3.2+ 10.2+ Android Browser 2.1+ 56+ Chrome for Android 57+ 57+ UC Browser for Android 11.4+ -
出于安全考慮，部分瀏覽器只允許通過HTTPS協(xié)議使用 Geolocation API。在HTTP協(xié)議下使用Geolocation API 瀏覽器會拋出異常，在開發(fā)階段，127.0.0.1和localhost 等本地域在兩種協(xié)議下均可使用。
Geolocation API 通過 navigator.geolocation 全局對象進行訪問，第一次訪問的時候會詢問用戶是否允許共享位置。
判斷瀏覽器是否支持 Geolocation API
// 判斷瀏覽器屬否支持獲取位置
if(navigator.geolocation){
console.log("可以獲取");
}else{
console.log("不支持");
}
實例代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
獲取用戶地理位置
<input type="button" value="點擊獲取位置" id="btn">
<script>
let btnBtn = document.getElementById('btn')
btnBtn.onclick = () => { // 點擊事件
getAdd()
}
// 成功回調(diào)
let success = (position) => {
console.log(`獲取位置成功：${position.coords}`);
console.log(position.coords); // 獲取坐標信息
// coords的常用屬性
console.log(position.coords.latitude); // 獲取坐標緯度
console.log(position.coords.longitude); // 獲取坐標經(jīng)度
console.log(position.coords.accuracy); // 獲取坐標精度，單位為米
console.log(position.timestamp); // 獲取位置的時間戳
}
// 失敗回調(diào)
let error = (positionErr) => {
console.log(`獲取位置失?。?{positionErr.code}+${positionErr.message}`);
}
let options = {
enableHightAccuracy: false, // 獲取高精度的位置信息，可能會增加響應(yīng)時間，默認是false
timeout: 30000, // 設(shè)置超時時間，單位毫秒，如果到達設(shè)定的時間沒獲取到信息則回觸發(fā)失敗回調(diào)，默認值為0，無限大
maximumAge: 0 // 設(shè)置用戶位置信息緩存的最大時間
}
let getAdd = () => {
navigator.geolocation.getCurrentPosition(success, error, options)
}
// 判斷瀏覽器屬否支持獲取位置
if(navigator.geolocation){
console.log("可以獲取");
}else{
console.log("不支持");
}
</script>
</body>
</html>
當獲取位置失敗時，會調(diào)用失敗回調(diào)(error函數(shù))。返回的參數(shù)<positionErr.code 標識錯誤的原因><positionErr.message錯誤信息描述> positionErr.code 值
《手把手教你HTML5實現(xiàn)根據(jù)LBS定位到商家兩點之間距離多少》
作者：藍海00
鏈接：https://www.jianshu.com/p/d0b0b6120055
久前研究過 HTML5 Geolocation，最近整理 F2E-Awesome 的時候，發(fā)現(xiàn)缺少相關(guān)的文章，所以按照自己的使用經(jīng)驗整理了此篇文章。
一、應(yīng)用場景：
請求一個位置信息，如果用戶同意，瀏覽器就會返回位置信息，該位置信息是通過支持 HTML5 地理定位功能的底層設(shè)備提供給瀏覽器。位置信息由緯度／經(jīng)度坐標和一些其他的元數(shù)據(jù)組成。有了這些位置信息就可以構(gòu)建引人注意目的位置感知類應(yīng)用程序。
二、簡單示例
我們通過簡短的代碼先粗略認識一下，大致知道如何使用。
三、兼容性
四、相關(guān) API
三個方法：
1.getCurrentPosition
獲取用戶當前定位位置，這會異步地請求獲取用戶位置，并查詢定位硬件來獲取最新信息。
需要注意的是：有 GPS 的設(shè)備可能需要一分鐘或更久來獲取 GPS 定位，在這種情況下 getCurrentPosition() 會返回低精度數(shù)據(jù)（基于 IP 的定位或 Wi-Fi 定位）。
2.watchPosition
您可以設(shè)定一個回調(diào)函數(shù)來響應(yīng)定位數(shù)據(jù)發(fā)生的變更（設(shè)備發(fā)生了移動，或獲取到了更高精度的地理位置信息），它與 getCurrentPosition() 接受相同的參數(shù)，但回調(diào)函數(shù)會被調(diào)用多次。錯誤回調(diào)函數(shù)與 getCurrentPosition() 中一樣是可選的，也會被多次調(diào)用。
3.clearWatch
watchPosition() 函數(shù)會返回一個 ID，唯一地標記該位置監(jiān)視器。您可以將這個 ID 傳給 clearWatch() 函數(shù)來停止監(jiān)視用戶位置。
navigator.geolocation.clearWatch(watchID);
五、警告
[Deprecation] getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
在 IOS 10 中，蘋果對 webkit 定位權(quán)限進行了修改，所有定位請求的頁面必須是 https 協(xié)議的。如果是非 https 網(wǎng)頁，在 http 協(xié)議下通過 html5 原生定位接口會返回錯誤，也就是無法正常定位到用戶的具體位置，而已經(jīng)支持 https 的網(wǎng)站則不會受影響。
六、定位原理
1.IP 定位
每一臺連上網(wǎng)路的電腦都具有一個獨一無二的 IP 位址，經(jīng)由 IP 位址可以反查出電腦位置，但是結(jié)果并不精確，而且很容易到受到 ISP 的 IP 分配機制影響，而造成誤差。
2.GPS 定位
GPS 是我們最常聽到的定位技術(shù)，它是利用衛(wèi)星來定位，可以很精確的偵測到使用者位置。但是要玩 GPS，行動裝置一定要有 GPS 模組，而且盡管 GPS 非常精準，還是會有技術(shù)上的局限，比如在偵測位置時，GPS 的感應(yīng)器要位于視線范圍內(nèi)（line of sight），因此在有很多高樓大廈、或者是障礙物的地方，GPS 反而沒有辦法運作自如。
3.Wi-Fi 三角測量定位
這個定位技術(shù)可以說是為都會區(qū)而設(shè)的，因為熱鬧的大都市通常會有不少 Wi-Fi 熱點，定位供應(yīng)商可以根據(jù)這些熱點的相對位置、距離等建立一個資料庫。Wi-Fi 三角測量適用于 GPS 無法滲透的地方，不過缺點是需要經(jīng)常更新資料庫。
4.基地臺三角測量定位
借助基地臺之間的相對位置，可以定位出用戶在哪里，只要你的手機收得到訊號，就能定位。 一般來說，這四種技術(shù)的準確性由高而低分別是：GPS 定位、Wi-Fi 三角測量、基地臺三角測量、IP定位。但還是要視環(huán)境而定，比如你到?jīng)]有 Wi-Fi 熱點的地方、或是手機信號不好，定位效果當然也會受影響。
位用戶的位置
HTML5 Geolocation API 用于獲得用戶的地理位置。
鑒于該特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的。
瀏覽器支持
Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation（地理定位）.
注意:Geolocation（地理定位）對于擁有 GPS 的設(shè)備，比如 iPhone，地理定位更加精確
HTML5 - 使用地理定位
請使用 getCurrentPosition() 方法來獲得用戶的位置。
下例是一個簡單的地理定位實例，可返回用戶位置的經(jīng)度和緯度
實例
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else{x.innerHTML="該瀏覽器不支持獲取地理位置。";}
}
function showPosition(position)
{
x.innerHTML="緯度: " + position.coords.latitude +
"<br>經(jīng)度: " + position.coords.longitude;
}
</script>
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
