HTML DOM 地理位置座標屬性-html教學-PHP中文網

首頁

web前端

html教學

HTML DOM 地理位置座標屬性

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 06, 2023 pm 08:05 PM

HTML DOM 地理定位座標屬性用於取得使用者裝置在地球上的位置和海拔高度。使用者必須批准他想要提供座標，此屬性才能運作。這樣做是為了不損害用戶的隱私。這可用於追蹤各種設備的位置。

屬性

以下是座標屬性 -

注意 - 所有這些屬性是唯讀的，並且傳回類型為 double。

Sr.No th>	屬性及描述
1	coordinates.latitude 返回裝置位置的緯度（以十進制度為單位）。
2	座標.經度 #傳回裝置位置的經度（以十進制度為單位）
3	coefficients.altitude 返回位置的海拔高度（以公尺為單位），相對到海平面。如果設備中沒有 GPS，則可以傳回 null。
4	座標。精度傳回緯度和經度屬性的精確度（以公尺為單位）
5	coordinates.altitudeAccuracy 傳回海拔屬性的精確度（以公尺為單位）
6	cocos.heading #返回裝置行進的方向。該值（以度為單位）表示設備與正北航向的距離。 0度代表真北，方向依順時針方向決定（東為90度，西為270度）。如果速度為 0，則航向為 NaN。如果裝置無法提供航向訊息，則該值為null
7	#座標.speed 傳回裝置的速度（以米每秒為單位）。該值可以為 null。

語法

以下是GeoLocation 座標屬性的語法-

coordinates.property

「屬性」可以是表中提到的上述屬性之一。

範例

讓我們來看看GeoLocation 座標屬性的範例-

<!DOCTYPE html>
<html>
<body>
<h1 id="Geolocation-coordinates-property">Geolocation coordinates property</h1>
<p>Get you coordinates by clicking the below button</p>
<button onclick="getCoords()">COORDINATES</button>
<p id="Sample">Your coordinates are:</p>
<script>
   var p = document.getElementById("Sample");
   function getCoords() {
      if (navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(showCoords);
      } else {
         p.innerHTML ="This browser doesn&#39;t support geolocation.";
      }
   }
   function showCoords(position) {
      p.innerHTML = "Longitude:" + position.coords.longitude + "<br>Latitude: " + position.coords.latitude+"<br>Accuracy: "+ position.coords.accuracy;
   }
</script>
</body>
</html>

輸出

這將產生以下輸出-

HTML DOM Geolocation coordinates属性

點擊「座標」按鈕並在「了解您的位置」彈出視窗中點擊「允許」時-

HTML DOM 地理位置座標屬性

在上面的範例中-

我們先建立了一個按鈕COORDINATES 將在使用者點擊時執行getCoords() 方法-

<button onclick="getCoords()">COORDINATES</button>

getCoords() 函數取得導航器物件的地理定位屬性，以檢查瀏覽器是否支援地理定位。如果瀏覽器支援地理定位，它將傳回一個 Geolocation 物件。使用導航器地理定位屬性的 getCurrentPosition() 方法，我們可以獲得裝置的目前位置。 getCurrentPosition() 方法是一個回呼函數，它接受一個函數作為其參數的對象，因為每個函數都是 JavaScript 中的一個對象。

這裡，我們將 showCoords() 方法傳遞給它。 showCoords() 方法以位置介面作為參數，並使用它來顯示 id 為「Sample」的段落內的經度、緯度和精確度。它使用段落innerHTML屬性向其附加文字 -

function getCoords() {
   if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showCoords);
   } else {
      p.innerHTML ="This browser doesn&#39;t support geolocation.";
   }
}
function showCoords(position) {
   p.innerHTML = "Longitude:" + position.coords.longitude + "<br>Latitude: " + position.coords.latitude+"<br>Accuracy: "+ position.coords.accuracy;
}

以上是HTML DOM 地理位置座標屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML容易為初學者學習嗎？Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

See all articles