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)ボタンをクリックする前に-
2)[検索]をクリックした後 ’ボタン-
3)[場所の更新]をクリックした後 ’ボタン-
4)[検索]をクリックした後 ’ボタン-
5)[場所の更新]をクリックした後 ’ボタンとユーザーがロケーションアクセス許可を拒否-
-
HTMLナビゲーターのジオロケーションプロパティ
HTMLナビゲーターのgeolocationプロパティは、ユーザーの位置を特定するために使用できるGeolocationオブジェクトを返します。 構文 以下は構文です- navigator.geolocation HTMLナビゲーターのジオロケーションプロパティの例を見てみましょう- 例 <!DOCTYPE html> <html> <style> body { color: #000; height: 100vh;
-
HTMLエディター
HTMLエディターは、HTMLドキュメントを(場合によっては)作成して実行するためのツールです。ユーザーが利用できるプロのHTMLエディターがいくつかあります(有料と無料の両方)。 テーマ、端末サポートなど、特定のアドオン機能はメモ帳以外のさまざまなHTMLエディタで提供されます。 以下は、一般的に使用されるHTMLエディタの一部です- メモ帳 最も基本的な無料のHTMLエディタの1つ。 Notepad ++ Notepad++はフリーテキストエディタでもあります。 C ++で記述され、構文の強調表示、プログラミング、スクリプトなどの制限付きオートコンプリートなどの機