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

HTMLジオロケーション


HTMLジオロケーションは、ユーザーが許可した場合にのみ、ユーザーのリアルタイムの地理的位置を取得するために使用されます。さまざまな理由で使用できます。 JavaScriptを使用して緯度と経度を取得します。

− Google Chrome 50より前は、ジオロケーションリクエストは承認されていましたが、Chrome 50では、HTTPS経由のリクエストのみが承認され、HTTP経由のリクエストは無視されます。

構文

以下は構文です-

navigator.geolocation.getCurrentPosition()

ここでは、 getCurrentPosition()によって返されるオブジェクト 次のプロパティを持つことができます-

プロパティ
戻り値
coords.latitude
10進数としての地理的緯度
coords.longitude
10進数としての地理経度
coords.accuracy
位置の精度
coords.altitude
平均海面からのメートル単位の高度
coords.altitudeAccuracy
位置の高度精度
coords.heading
北から時計回りに度数で進む
coords.speed
メートル/秒単位の速度
imestamp
回答の日時

HTMLジオロケーションがエラー処理を提供する方法の例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<title>HTML Geolocation</title>
<style>
   * {
      padding: 2px;
      margin:5px;
   }
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-Geolocation</legend>
<input type="button" value="Update Location" onclick="updateLocation()">
<input type="button" value="Search" onclick="searchLoc()">
<div id="divDisplay">Current Location:</div>
<div>
<span id="latitude">Latitude: 42.9177901</span>
<span id="longitude">Longitude: -75.8114698</span>
</div>
<script>
   var latObj = document.getElementById("latitude");
   var longObj = document.getElementById("longitude");
   var divDisplay = document.getElementById("divDisplay");
   function searchLoc(){
      var lat = latObj.textContent.split(": ")[1];
      var long = longObj.textContent.split(": ")[1];
      var url = "https://www.google.com/maps/@"+lat+","+long+",8.58z";
      browseWindow = window.open(url, "browseWindow", "width=400, height=200");
   }
   function updateLocation(){
      browseWindow.close();
      var user = navigator.geolocation;
      if (user)
         user.getCurrentPosition(updatePosition, errorHandler);
      else
         divDisplay.textContent = "Geolocation is not supported in this browser";
   }
   function updatePosition(position) {
      divDisplay.innerHTML = 'Location Updated<br>Current Location:';
      latObj.textContent = 'Latitude: '+position.coords.latitude;
      longObj.textContent = 'Longitude: '+position.coords.longitude;
   }
   function errorHandler(error) {
      switch(error.code) {
         case error.PERMISSION_DENIED:
            divDisplay.textContent = "You denied the request to get Geolocation"
            break;
         case error.POSITION_UNAVAILABLE:
            divDisplay.textContent = "Your location information is unavailable"
            break;
         case error.TIMEOUT:
            divDisplay.textContent = "The request to get your location timed out"
            break;
         case error.UNKNOWN_ERROR:
            divDisplay.textContent = "Unknown error occurred"
            break;
      }
   }
</script>
</body>
</html>

1)ボタンをクリックする前に-

HTMLジオロケーション

2)[検索]をクリックした後 ’ボタン-

HTMLジオロケーション

3)[場所の更新]をクリックした後 ’ボタン-

HTMLジオロケーション

4)[検索]をクリックした後 ’ボタン-

HTMLジオロケーション

5)[場所の更新]をクリックした後 ’ボタンとユーザーがロケーションアクセス許可を拒否-

HTMLジオロケーション


  1. HTMLナビゲーターのジオロケーションプロパティ

    HTMLナビゲーターのgeolocationプロパティは、ユーザーの位置を特定するために使用できるGeolocationオブジェクトを返します。 構文 以下は構文です- navigator.geolocation HTMLナビゲーターのジオロケーションプロパティの例を見てみましょう- 例 <!DOCTYPE html> <html> <style>    body {       color: #000;       height: 100vh;    

  2. HTMLエディター

    HTMLエディターは、HTMLドキュメントを(場合によっては)作成して実行するためのツールです。ユーザーが利用できるプロのHTMLエディターがいくつかあります(有料と無料の両方)。 テーマ、端末サポートなど、特定のアドオン機能はメモ帳以外のさまざまなHTMLエディタで提供されます。 以下は、一般的に使用されるHTMLエディタの一部です- メモ帳 最も基本的な無料のHTMLエディタの1つ。 Notepad ++ Notepad++はフリーテキストエディタでもあります。 C ++で記述され、構文の強調表示、プログラミング、スクリプトなどの制限付きオートコンプリートなどの機