HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLDOMジオロケーション位置プロパティ

HTML DOMジオロケーション座標プロパティは、地球上のユーザーのデバイスの位置と高度を取得するために使用されます。ユーザーは、このプロパティが機能する前に、座標を指定することを承認する必要があります。これは、ユーザーのプライバシーが損なわれないようにするために行われます。これは、さまざまなデバイスの場所を追跡するために使用できます。

プロパティ

以下は位置プロパティです-

注 −以下のプロパティは読み取り専用です-

プロパティ 説明
position.coords 地球上のデバイスの緯度、経度、高度、速度などの情報を持つ座標オブジェクトを返すこと。また、測定値の精度をメートル単位で表す精度値もあります。
position.timestamp 位置オブジェクトが作成された日時を表します。その時間を表すDOMTimeStampを返します。

構文

以下は、ジオロケーション位置プロパティの構文です-

position.property

ここで、プロパティは上記の表の2つのプロパティのいずれかになります。

例

ジオロケーション位置プロパティの例を見てみましょう-

<!DOCTYPE html>
<html>
<body>
<h1>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'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>

出力

これにより、次の出力が生成されます-

HTMLDOMジオロケーション位置プロパティ

COORDINATESボタンをクリックすると-

HTMLDOMジオロケーション位置プロパティ

上記の例では-

最初に、ユーザーがクリックしたときにgetCoords（）メソッドを実行するボタンCOORDINATESを作成しました-

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

getCoords（）関数は、ブラウザーがジオロケーションをサポートしているかどうかを確認するために、ナビゲーターオブジェクトのジオロケーションプロパティを取得します。ブラウザがジオロケーションをサポートしている場合は、ジオロケーションオブジェクトを返します。ナビゲータージオロケーションプロパティのgetCurrentPosition（）メソッドを使用して、デバイスの現在の位置を取得します。 getCurrentPosition（）メソッドはコールバック関数であり、すべての関数はJavaScriptのオブジェクトであるため、パラメーターのオブジェクトとして関数を受け取ります。

ここでは、showCoords（）メソッドを渡しました。 showCoords（）メソッドは、位置インターフェイスをパラメーターとして受け取り、それを使用して、IDが「Sample」の段落内の経度、緯度、および精度を表示します。段落innerHTMLプロパティを使用してテキストを追加します-

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

  1. HTMLDOMtextContentプロパティ

    HTML DOM textContentプロパティは、ノードとそのすべての子ノードのテキスト（空白を含む）に対応する文字列を返す/設定します。 以下は構文です- 文字列値を返す Node.textContent ここで、戻り値は次のようになります- ドキュメントノードの「Null」 指定されたノードとそのすべての子ノードのテキスト textContentを文字列値に設定します Node.textContent = string 注：HTML DOM textContent プロパティは、ノードと子ノードのテキストを単一のテキスト文字列として設定します。 HTML DOM

  2. HTMLDOMOlタイププロパティ

    HTML DOM Ol typeプロパティは、順序付きリストで使用されるマーカーのタイプに対応するtype属性の値を設定/返します。 以下は構文です- タイププロパティを返す olObject.type 設定タイプ キャラクターに olObject.type = ‘1|a|A|i|I’ Olタイプの例を見てみましょう プロパティ- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM Ol type</title> <style>   &n