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

HTML5でジオロケーション座標を使用するにはどうすればよいですか?


HTML5 Geolocation APIを使用すると、現在地をお気に入りのWebサイトと共有できます。 Javascriptは緯度と経度をキャプチャし、バックエンドWebサーバーに送信して、地元のお店を見つけたり、地図上に現在地を表示したりするなど、場所を意識した凝ったことを行うことができます。地理位置座標は、デバイスの地理的位置を指定します。

ジオロケーションメソッドgetCurrentPosition()およびgetPositionUsingMethodName()は、ロケーション情報を取得するコールバックメソッドを指定します。これらのメソッドは、完全な位置情報を格納するオブジェクトPositionに対して非同期的に呼び出されます。

Positionオブジェクトは、デバイスの現在の地理的位置を指定します。場所は、方位と速度に関する情報とともに、地理座標のセットとして表されます。

位置オブジェクトのプロパティには次のものが含まれます-

プロパティ タイプ 説明
座標
オブジェクト
デバイスの地理的な場所を指定します。場所は、方位と速度に関する情報とともに、地理座標のセットとして表されます。
coords.latitude
数値
緯度の推定値を小数度で指定します。値の範囲は[-90.00、+90.00]です。
coords.longitude
数値
経度の推定値を小数で指定します。値の範囲は[-180.00、+180.00]です。

以下では、緯度と経度の座標を持つ位置オブジェクトを使用します-

HTML5でジオロケーション座標を使用するにはどうすればよいですか?

ジオロケーションオブジェクトは、次のメソッドを提供します。それらはすべて、座標を使用して場所を取得します-

メソッド 説明
getCurrentPosition() このメソッドは、ユーザーの現在の地理的位置を取得します。
watchPosition() このメソッドは、デバイスの現在の地理的位置に関する定期的な更新を取得します。
clearWatch() このメソッドは、進行中のwatchPosition呼び出しをキャンセルします。


次のコードを実行して、ジオロケーションの操作方法とHTML5でのジオロケーション座標の使用方法を学ぶことができます。デバイスの現在の地理的位置に関する定期的な更新を取得します。場所は、方位と速度に関する情報とともに、地理座標のセットとして表されます。

<!DOCTYPE HTML>
<html>
   <head>
      <script type="text/javascript">
         var watchID;
         var geoLoc;
         function showLocation(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            alert("Latitude : " + latitude + " Longitude: " + longitude);
         }
         function errorHandler(err) {
            if(err.code == 1) {
               alert("Error: Access is denied!");
            } else if( err.code == 2) {
               alert("Error: Position is unavailable!");
            }
         }
         function getLocationUpdate(){
            if(navigator.geolocation){
               // timeout at 60000 milliseconds (60 seconds)
               var options = {timeout:60000};
               geoLoc = navigator.geolocation;
               watchID = geoLoc.watchPosition(showLocation, errorHandler, options);
            } else{
               alert("Sorry, browser does not support geolocation!");|
            }
         }
      </script>
   </head>
   <body>
      <form>
         <input type="button" onclick="getLocationUpdate();" value="Watch Update"/>
      </form>
   </body>
</html>

  1. HTML5でドラッグアンドドロップを使用するにはどうすればよいですか?

    ドラッグアンドドロップ(DnD)は、マウスクリックを使用してアイテムのコピー、並べ替え、削除を簡単に行える強力なユーザーインターフェイスの概念です。これにより、ユーザーは要素の上でマウスボタンをクリックして押したまま、別の場所にドラッグし、マウスボタンを離して要素をそこにドロップできます。 従来のHTML4でドラッグアンドドロップ機能を実現するには、開発者は複雑なJavascriptプログラミングまたはjQueryなどの他のJavascriptフレームワークを使用する必要があります。 HTML 5では、ブラウザにネイティブDnDサポートを提供するドラッグアンドドロップ(DnD)APIが登場し

  2. 位置追跡に粒子アルゴンを使用する方法

    プロジェクトにプレゼンスまたは位置追跡を追加したいと思ったことはありませんか?解決策 (またはその欠如) に不満を感じていますか? 心配しないでください。あなただけではありません! この投稿では、非常に基本的な追跡および通知アプリケーションを実装する方法を学びます。 Particle Argon と Tile Mate を使用します。 最後に、タイルが存在するかどうかを判断できるようになります。さらに、Pushover を使用して、選択したデバイスにプッシュ通知を送信します。 始めましょう! 注意 始める前に、この投稿は長いです . PDF バージョンをダウンロードして、保存して後で