【高級功能】使用地理定位

来源:http://www.cnblogs.com/luka/archive/2016/09/02/5827698.html
-Advertisement-
Play Games

地理定位（Geolocation）API讓我們可以獲取用戶當前地理位置的信息（或者至少是正在運行瀏覽器的系統的位置）。它不是HTML5規範的一部分，但經常被歸組到與HTML5相關的新功能中。 1. 使用地理定位 我們通過全局屬性 navigator.geolocation 訪問地理定位功能，它會返回 ...


地理定位（Geolocation）API讓我們可以獲取用戶當前地理位置的信息（或者至少是正在運行瀏覽器的系統的位置）。它不是HTML5規範的一部分，但經常被歸組到與HTML5相關的新功能中。

1. 使用地理定位

我們通過全局屬性 navigator.geolocation 訪問地理定位功能，它會返回一個 Geolocation對象。

 

獲取當前位置

顧名思義，getCurrentPosition方法能獲得當前的位置，不過位置信息不是由函數自身返回的。我們需要提供一個成功的回調函數，它會在位置信息可用時觸發（這樣做考慮到了請求位置和信息變得可用之間可能會有延遲）。下麵的示例展示瞭如何使用這個方法獲得位置信息：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>獲取當前位置</title>
    <style type="text/css">
        table {border-collapse: collapse;}
        th,td {padding: 4px;}
        th {text-align: right;}
    </style>
</head>
<body>
<table border="1">
    <tr>
        <th>Longitude:</th><td id="longitude">-</td>
        <th>Latitude:</th><td id="latitude">-</td>
    </tr>
    <tr>
        <th>Altitude:</th><td id="altitude">-</td>
        <th>Accuracy:</th><td id="accuracy">-</td>
    </tr>
    <tr>
        <th>Altitude Accuracy:</th><td id="altitudeAccuracy">-</td>
        <th>Heading:</th><td id="heading">-</td>
    </tr>
    <tr>
        <th>Speed:</th><td id="speed">-</td>
        <th>Time Stamp:</th><td id="timestamp">-</td>
    </tr>
</table>
<script type="application/javascript">
    navigator.geolocation.getCurrentPosition(displayPosition);
    function displayPosition(pos){
        var propertis = ["longitude","latitude","altitude","accuracy",
            "altitudeAccuracy","heading","speed"];
        for(var i=0;i<propertis.length;i++){
            var value = pos.coords[propertis[i]];
            document.getElementById(propertis[i]).innerHTML = value;
        }
        document.getElementById("timestamp").innerHTML = pos.timestamp;
    }
</script>
</body>
</html>

這個例子中的腳本調用了getCurrentPosition，並傳遞displayPosition函數作為該方法的參數。當位置信息變得可用時，瀏覽器就會調用指定函數，並傳入一個提供位置詳情的Position對象。Position對象非常簡單，如下表所示：

 

我們真正感興趣的是Coordinates 對象，它由Position.coords屬性返回。下表介紹了Coordinates對象的屬性：

不是所有Coordinates對象的數據值都時刻可用。瀏覽器獲取位置信息的機制沒有統一的規定，所使用的技術也有很多。移動設備越來越多地配置了GPS、加速度計和電子羅盤設備，這就意味著那些平臺擁有最精確和最完整的數據。

我們仍然可以為其他設備獲取位置信息：瀏覽器使用的一種地理定位服務會嘗試根據網路信息確定位置。如果你的系統里有Wi-Fi適配器，那麼信號範圍內的網路就會與一份網路目錄進行對比，這份目錄是街道級景觀調查（如谷歌街景服務）結果的一部分。如果沒有Wi-Fi，也可以用ISP所提供的IP地址獲得大概的位置。

這東西實在很可怕，所以當文檔使用地理定位功能時，所有瀏覽器會做的第一件事就是詢問用戶是否對其授權，從下圖可以看到IE瀏覽器是如何做的：

如果用戶允許此請求，瀏覽器就能獲得位置信息，併在信息可用時調用回調函數。下圖是筆記本里IE瀏覽器顯示的效果：

然後是手機上顯示的效果：

2. 處理地理定位錯誤

我們可以給getCurrentPosition方法提供第二個參數，它讓我們可以指定一個函數，在獲取位置發生錯誤時調用它。此函數會獲得一個PositionError對象，它定義的屬性如下：

code 屬性有三個可能的值：

下麵的示例展示瞭如何用PositionError對象接收錯誤。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用PositionError處理錯誤</title>
    <style type="text/css">
        table {border-collapse: collapse;}
        th,td {padding: 4px;}
        th {text-align: right;}
    </style>
</head>
<body>
<table border="1">
    <tr>
        <th>Longitude:</th><td id="longitude">-</td>
        <th>Latitude:</th><td id="latitude">-</td>
    </tr>
    <tr>
        <th>Altitude:</th><td id="altitude">-</td>
        <th>Accuracy:</th><td id="accuracy">-</td>
    </tr>
    <tr>
        <th>Altitude Accuracy:</th><td id="altitudeAccuracy">-</td>
        <th>Heading:</th><td id="heading">-</td>
    </tr>
    <tr>
        <th>Speed:</th><td id="speed">-</td>
        <th>Time Stamp:</th><td id="timestamp">-</td>
    </tr>
    <tr>
        <th>Code:</th><td id="errcode">-</td>
        <th>Error Message:</th><td id="errmessage">-</td>
    </tr>
</table>
<script type="application/javascript">
    navigator.geolocation.getCurrentPosition(displayPosition,handleError);
    function displayPosition(pos){
        var propertis = ["longitude","latitude","altitude","accuracy",
            "altitudeAccuracy","heading","speed"];
        for(var i=0;i<propertis.length;i++){
            var value = pos.coords[propertis[i]];
            document.getElementById(propertis[i]).innerHTML = value;
        }
        document.getElementById("timestamp").innerHTML = pos.timestamp;
    }

    function handleError(err){
        document.getElementById("errcode").innerHTML = err.code;
        document.getElementById("errmessage").innerHTML = err.message;
    }
</script>
</body>
</html>

製造錯誤最簡單的方式是在瀏覽器提示時拒絕授權。其顯示效果如下：

 

3.指定地理定位選擇

我們可以給getCurrentPosition 方法提供的第三個參數是一個PositionOptions 對象。這個功能允許我們可以部分控制位置信息的獲取方式。下表展示了這個對象定義的屬性：

設置highAccuracy屬性為true只是請求瀏覽器給出可能的最佳結果，並不保證得到的位置一定會更準確。對移動設備來說，獲得更準確位置的可能方式是禁用節能模式，或者在某些情況下打開GPS功能（低精度位置信息可能來源於Wi-Fi 或基站數據）。其他設備則可能無法獲得更高精度的數據。修改前面例子的JavaScript代碼如下，其展示了在請求位置時如何使用PositionOptions對象：

<script type="application/javascript">
    var options ={
        enableHigAccuracy:false,
        timeout:2000,
        maximumAge:30000
    };
    navigator.geolocation.getCurrentPosition(displayPosition,handleError,options);
    function displayPosition(pos){
        var propertis = ["longitude","latitude","altitude","accuracy",
            "altitudeAccuracy","heading","speed"];
        for(var i=0;i<propertis.length;i++){
            var value = pos.coords[propertis[i]];
            document.getElementById(propertis[i]).innerHTML = value;
        }
        document.getElementById("timestamp").innerHTML = pos.timestamp;
    }

    function handleError(err){
        document.getElementById("errcode").innerHTML = err.code;
        document.getElementById("errmessage").innerHTML = err.message;
    }
</script>

這個腳本有一處不尋常的地方：這裡沒有創建一個新的PositionOptions 對象，而是創建了一個普通的Object，並定義了表格裡的那些屬性。此例表明瞭不要求獲得最高級的精度，並準備在請求超時前等待2秒，而且願意接受緩存了不超過30秒的數據。

 

4.監控位置

可以用watchPosition 方法不斷獲得關於位置的更新。這個方法所需的參數和 getCurrentPosition 方法相同，工作方式也一樣。它們的區別在於：隨著位置發生改變，回調函數會被反覆地調用。下麵的例子展示瞭如何使用 watchPosition 方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用watchPosition</title>
    <style type="text/css">
        table {border-collapse: collapse;}
        th,td {padding: 4px;}
        th {text-align: right;}
    </style>
</head>
<body>
<table border="1">
    <tr>
        <th>Longitude:</th><td id="longitude">-</td>
        <th>Latitude:</th><td id="latitude">-</td>
    </tr>
    <tr>
        <th>Altitude:</th><td id="altitude">-</td>
        <th>Accuracy:</th><td id="accuracy">-</td>
    </tr>
    <tr>
        <th>Altitude Accuracy:</th><td id="altitudeAccuracy">-</td>
        <th>Heading:</th><td id="heading">-</td>
    </tr>
    <tr>
        <th>Speed:</th><td id="speed">-</td>
        <th>Time Stamp:</th><td id="timestamp">-</td>
    </tr>
    <tr>
        <th>Code:</th><td id="errcode">-</td>
        <th>Error Message:</th><td id="errmessage">-</td>
    </tr>
</table>
<button id="pressme">Cancel Watch</button>
<script type="application/javascript">
    var options ={
        enableHigAccuracy:false,
        timeout:2000,
        maximumAge:30000
    };
    var watchID = navigator.geolocation.watchPosition(displayPosition,handleError,options);
    document.getElementById("pressme").onclick = function(e){
        navigator.geolocation.clearWatch(watchID);
    }
    function displayPosition(pos){
        var propertis = ["longitude","latitude","altitude","accuracy",
            "altitudeAccuracy","heading","speed"];
        for(var i=0;i<propertis.length;i++){
            var value = pos.coords[propertis[i]];
            document.getElementById(propertis[i]).innerHTML = value;
        }
        document.getElementById("timestamp").innerHTML = pos.timestamp;
    }

    function handleError(err){
        document.getElementById("errcode").innerHTML = err.code;
        document.getElementById("errmessage").innerHTML = err.message;
    }
</script>
</body>
</html>

在這個例子里，腳本用 watchPosition方法來監控位置。當我們想要停止監控時，可以把此方法返回的ID值傳遞給 clearWatch。這裡選擇在button按鈕被按下時執行這個操作。

 

來源：《HTML5權威指南》(《The Definitive Guide to HTML5》)


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前端技術——DOM藝術
    先知BOM,再知DOM BOM <a href="#">BOM</a> DOM* <a href="#">DOM</a> javaScript中的DOM操作 jQuery中的DOM操作 java中的DOM操作 基於JavaScript的DOM操作 DOM：文檔對象模型，文檔可以是.xml .html ...
  • Linux學習入門
    作為當代前端，前後端的界限越來越小，要想走的更穩，學習Linux操作系統的相關知識是必不可少的。 為什麼伺服器端採用linux操作系統？ 1.linux相對於windows的性能更加穩定 2.前期投入成本低，相比於windows的伺服器產品，linux是完全開源免費的，linux支持最小化安裝，在相 ...
  • ps圖層與切圖
    一、圖片格式為png 1.shift+按住滑鼠左鍵，拉出參考線。 2.使用切片工具切出圖片 3.導出圖片：文件-儲存為web所用格式-預設（png-24)-選中需要導出圖片-點擊儲存-切片（選中用戶的所有切片）-保存（保存在桌面上） 二、圖片格式為psd 1.新建一個文檔 2.圖層中找到需要的圖層- ...
  • Vue過濾器
    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson05 一 過濾器寫法 {{ message | Filter}} 二 Vue自帶的過濾器:capitalize 功能:首字母大寫 上面代碼輸出:Abc 三 Vue自帶的過 ...
  • HTML <b>、 <strong> 、<big>、<small>、<em>、<i>、<sub>和<sup> 標簽
    HTML <b> 標簽 所有瀏覽器都支持 <b> 標簽。 定義和用法 <b> 標簽規定粗體文本。 所有瀏覽器都支持 <b> 標簽。 定義和用法 <b> 標簽規定粗體文本。 定義和用法 <b> 標簽規定粗體文本。 註釋：根據 HTML5 規範，在沒有其他合適標簽更合適時，才應該把 <b> 標簽作為最後 ...
  • 小白總結的一些關於JS的基礎概念
    我的第一篇博客 ——JS的那些基礎概念 接觸前端已經整整一學年了，這是我第一次寫博客，感覺心裡裝了無數只兔子，很緊張，很激動，也很興奮。 第一次寫，也不知道有沒有什麼套路，需不需要註意文采之類的。不管了，太激動了，我就直接寫只要內容吧！下麵是我總結的一些關於JS的基礎概念： 【變數】從字面上面，變數 ...
  • Javascript中prototype屬性的詳解
    在典型的面向對象的語言中，如java，都存在類（class）的概念，類就是對象的模板，對象就是類的實例。但是在Javascript語言體系中，是不存在類（Class）的概念的，javascript中不是基於‘類的’，而是通過構造函數（constructor）和原型鏈（prototype chains ...
  • 【高級功能】使用Web存儲
    Web存儲允許我們在瀏覽器里保存簡單的鍵/值數據。Web存儲和cookie很相似，但它有著更好的實現方式，能保存的數據量也很大。這兩種類型共用相同的機制，但是被保存數據的可見性和壽命存在區別。 PS:還有一種存儲規範名為“索引資料庫API”（Indexed Database API），它允許保存富格 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類