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

HTMLDOMジオロケーション座標プロパティ

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

プロパティ

以下は座標プロパティです-

注 −これらのプロパティはすべて読み取り専用であり、戻りタイプはdoubleです。

Sr.No プロパティと説明
1 coordinates.latitude
デバイスの位置の緯度を小数で返します。
2 coordinates.longitude
デバイス位置の経度を小数度で返すには
3 coordinates.altitude
海面を基準にした位置の高度をメートル単位で返します。デバイスにGPSがない場合は、nullを返す可能性があります。
4 coordinates.accuracy
緯度と経度のプロパティの精度をメートル単位で返すには
5 coordinates.altitudeAccuracy
高度プロパティの精度をメートル単位で返すには
6 coordinates.heading
デバイスが移動している方向に戻ります。度で指定されたこの値は、デバイスが真北に向かっている距離を示します。 0度は真北を表し、方向は時計回りに決定されます（東は90度、西は270度）。速度が0の場合、見出しはNaNです。デバイスが見出し情報を提供できない場合、この値はnullです
7 coordinates.speed
デバイスの速度をメートル/秒で返します。この値はnullにすることができます。

構文

以下は、GeoLocation座標プロパティの構文です-

coordinates.property

「プロパティ」は、表に記載されている上記のプロパティの1つです。

例

GeoLocation座標プロパティの例を見てみましょう-

<!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ジオロケーション座標プロパティ

[座標]ボタンをクリックし、[現在地を知る]ポップアップで[許可]をクリックすると-

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. HTMLDOMOl反転プロパティ

    HTML DOM Olの逆プロパティは、リストの順序を降順にするか昇順にするかを設定/返します（デフォルト）。 以下は構文です- ブール値を返す-true/false olObject.reversed 反転の設定 booleanValueへ olObject.reversed = booleanValue ここでは、「booleanValue」 次のようになります- booleanValue 詳細 true 順序が降順になることを定義します false デフォルトで順序が昇順になることを定義します Ol反転の例を見てみましょう

  2. HTMLDOMoffsetWidthプロパティ

    HTML DOM offsetWidthプロパティは、パディング、境界線、スクロールバーを含む要素の幅に対応する数値を返しますが、マージンは返しません。 以下は構文です- 数値を返す HTMLelement.offsetWidth HTML DOM offsetWidthの例を見てみましょう プロパティ- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM offsetHeight</title> <style>    form {   &n