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

HTMLのnavigator.geolocationプロパティとは？使い方とサンプルコードを解説

HTMLの navigator.geolocation プロパティは、ユーザーの現在位置情報を取得するための Geolocation オブジェクト を返します。このオブジェクトを利用することで、JavaScriptからユーザーの緯度・経度などの位置情報にアクセスできます。

基本構文

navigator.geolocation プロパティの書き方は以下のとおりです。

navigator.geolocation

Geolocationオブジェクトの主なメソッド

  • getCurrentPosition()：ユーザーの現在位置を1回だけ取得します。
  • watchPosition()：位置の変化を継続的に監視し、更新があるたびにコールバックを実行します。
  • clearWatch()：watchPosition() による監視を停止します。

なお、位置情報の取得にはユーザーの許可が必要です。ブラウザは初回アクセス時に許可を求めるダイアログを表示します。また、セキュリティ上の理由から、このAPIは HTTPS環境でのみ動作 することに注意してください。

サンプルコード

次の例では、「現在地を表示」ボタンをクリックすると、navigator.geolocation プロパティを使ってユーザーの緯度・経度を取得し、画面に表示します。

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      height: 100vh;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
      text-align: center;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 20px;
      width: 330px;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
   .show {
      font-size: 1.2rem;
      color: #fff;
   }
</style>
<body>
<h1>HTML navigator geolocation デモ</h1>
<button class="btn" onclick="display()">現在地を表示</button>
<div class="show"></div>
<script>
   function display() {
      var userLocation = navigator.geolocation;
      userLocation.getCurrentPosition(displayPosition);
   }  
   function displayPosition(pos) {
      document.querySelector(".show").innerHTML = "<p>緯度： " + pos.coords.latitude + "</p>" + "<p>経度： " + pos.coords.longitude + "</p>";
   }
</script>
</body>
</html>

実行結果

HTMLのnavigator.geolocationプロパティとは？使い方とサンプルコードを解説

ページ上の 「現在地を表示」 ボタンをクリックすると、ブラウザが位置情報の使用許可を求めます。許可すると、ユーザーの位置座標（緯度・経度）が画面に表示されます。

HTMLのnavigator.geolocationプロパティとは？使い方とサンプルコードを解説

まとめ

navigator.geolocation プロパティを使えば、数行のコードでユーザーの位置情報を取得できます。地図アプリや店舗検索、天気情報サービスなど、位置情報を活用したWebアプリケーション開発の基礎として、ぜひ覚えておきましょう。エラー処理を行う場合は、getCurrentPosition() の第2引数にエラー時のコールバック関数を指定することも可能です。

  1. HTMLのnavigator.onLineプロパティでブラウザのオンライン・オフライン状態を判定する方法

    navigator.onLineプロパティは、ブラウザが現在オンライン状態かオフライン状態かを示す真偽値（boolean）を返します。このプロパティを活用すれば、ユーザーのネットワーク接続状況をJavaScriptで簡単に検出し、それに応じた処理を実装することができます。 構文 基本的な構文は以下のとおりです。 navigator.onLine 戻り値は次のようになります。 オンラインの場合：true オフラインの場合：false サンプルコード ここでは、HTMLのnavigator onLineプロパティを使用した具体的な例を紹介します。ボタンをクリックすると、ブラウザがオンラインかオ

  2. HTML DOMのdisplayプロパティとは？使い方と全設定値をわかりやすく解説

    HTML DOMのdisplayプロパティは、要素の表示形式（表示タイプ）を設定または取得するために使用されるプロパティです。要素の表示は主に「block（ブロック）」と「inline（インライン）」の2種類に分類されます。また、display:noneを指定することで、要素を画面上から完全に非表示にすることも可能です。 displayプロパティの構文 displayプロパティを設定する場合の構文は以下のとおりです。 object.style.display = value displayプロパティに指定できる値の一覧 displayプロパティには、以下のような値を指定できます。 値説明