ホーム>Web デザインのチュートリアル>HTMLチュートリアル

HTML5ジオロケーションポジショニング機能の使用方法

著者：Eve Cole 更新時間：2025-08-20 01:32:02

比較的単純なJavaScriptコードを使用して、緯度と経度、高度など、ユーザーの地理的位置の詳細を決定できるWebアプリケーションを作成できます。一部のWebアプリケーションは、GoogleMaps APIなどのマップシステムも統合することにより、ユーザーの場所の移動を監視することでナビゲーション機能を提供することもできます。

HTML5は、ユーザーの位置を決定するためのジオロケーションAPIを提供します。 HTML5のこの機能を使用して、ジオロケーション情報に基づいてアプリケーションを開発できます。この記事では、例を組み合わせて、HTML5の使用方法を共有し、BaiduおよびGoogleマップインターフェイスを使用してユーザーの正確な地理的位置情報を取得します。

GeolocationはHTML5の新機能であるため、HTML5、特にGeolocationがより正確なiPhoneなどのハンドヘルドデバイスをサポートする最新のブラウザでのみ実行することができます。まず、ユーザーデバイスのブラウザがジオロケーションをサポートしているかどうかを検出し、もしそうなら、地理情報を取得する必要があります。この機能は、ユーザーのプライバシーを侵害する可能性があることに注意してください。ユーザーの同意がない限り、ユーザーの位置情報は利用できないため、アプリケーションにアクセスすると、ジオロケーションを許可するかどうかを促します。もちろん、許可することを選択できます。

  1. functiongetLocation（）{
  2. if（navigator.geolocation）{
  3. navigator.geolocation.getCurrentPosition（ShowPosition、Showerror）;
  4. }それ以外{
  5. アラート（ブラウザはジオロケーションをサポートしていません。）;
  6. }
  7. }

上記のコードは、ユーザーデバイスがGeolocationをサポートしている場合、getCurrentPosition（）メソッドを実行することを示しています。 getCurrentPosition（）が正常に実行されると、座標オブジェクトがパラメーターショーポジションで指定された関数に返されます。 getCurrentPosition（）メソッドの2番目のパラメーターは、ユーザーの場所が取得できないときに実行される関数を指定するエラーを処理するために使用されます。

まず、ユーザーの地理的位置を取得するときにいくつかのエラーコードの処理を指定する関数Showerror（）を見てみましょう。

  1. functionshowerror（エラー）{
  2. switch（error.code）{
  3. caseerror.permission_denied：
  4. アラート（ローカリゼーションが失敗し、ユーザーはジオロケーションを要求することを拒否します）;
  5. 壊す;
  6. caseerror.position_unavailable：
  7. アラート（ローカリゼーションが失敗し、位置情報は利用できません）。
  8. 壊す;
  9. caseerror.timeout：
  10. アラート（ロケーションが失敗し、ユーザーロケーションタイムアウトの取得を要求）;
  11. 壊す;
  12. caseerror.unknown_error：
  13. アラート（ローカリゼーションが失敗し、位置決めシステムが失敗しました）;
  14. 壊す;
  15. }
  16. }

関数のshowposition（）を見て、座標の緯度と経度を呼び出して、ユーザーの緯度と経度を取得します。

  1. functionshowposition（position）{
  2. varlat = position.coords.latitude; // latitude
  3. varlag = position.coords.longitude; //経度
  4. アラート（ 'lat：'+lat+'、経度：'+ラグ）;
  5. }

BaiduマップとGoogleマップインターフェイスを使用して、ユーザーアドレスを取得します

HTML5のジオロケーションがユーザーの緯度と経度を取得できることを理解しているため、抽象的な緯度と経度を読み取り可能な意味のある実際のユーザー地理的位置情報に変換することが必要です。幸いなことに、BaiduマップとGoogleマップは、この点でインターフェイスを提供します。 HTML5が取得した緯度と経度の情報をMAPインターフェイスに渡すだけで、州、市、地方自治体、地域の情報、さらには街路や家番号などの詳細な地理的位置情報を含むユーザーの地理的位置を返します。

最初にDIVを定義して、ページに地理的位置を表示し、それぞれID＃baidu_geoとid＃google_geoを定義します。キー関数showposition（）を変更するだけです。まず、Baidu Map Interface Interactionを見てみましょう。緯度と経度の情報をAjaxを介してBaiduマップインターフェイスに送信すると、インターフェイスは対応する州、市、および通りの情報を返します。 Baidu Map InterfaceはJSONデータの文字列を返し、ニーズに応じて必要な情報をdiv＃baidu_geoに表示できます。 Jquery Libraryはここで使用されており、JQuery Libraryファイルを最初にロードする必要があることに注意してください。

  1. functionshowposition（position）{
  2. varlatlon = position.coords.latitude+'、'+position.coords.longitude;
  4. // baidu
  5. varurl = http：//api.map.baidu.com/geocoder/v2/？ak = c93b5178d7a8ebdb830b9b557abce78b＆callback = renderRevervese＆location =+latlon+＆output = json＆pois = 0;
  6. $ .ajax（{
  7. タイプ：get、
  8. データ型：JSONP、
  9. URL：URL、
  10. beforesend：function（）{
  11. $（＃baidu_geo）.html（ 'locating ...'）;
  12. }、
  13. 成功：function（json）{
  14. if（json.status == 0）{
  15. $（＃baidu_geo）.html（json.result.formatted_address）;
  16. }
  17. }、
  18. エラー：function（xmlhttprequest、textStatus、errorthrown）{
  19. $（＃baidu_geo）.html（latlon+アドレスの場所が失敗しました）;
  20. }
  21. }）;
  22. }）;

Google Maps Interface Interactionを見てみましょう。同様に、Ajaxを介してGoogle Mapsインターフェイスに緯度と経度の情報を送信すると、インターフェイスは対応する州、都市、通りの詳細を返します。 Google Mapsインターフェイスは、一連のJSONデータも返します。これらのJSONデータは、Baidu Mapsインターフェイスによって返されるデータよりも詳細です。ニーズに応じて、Google_geoをdivに必要な情報を表示できます。

  1. functionshowposition（position）{
  2. varlatlon = position.coords.latitude+'、'+position.coords.longitude;
  4. //グーグル
  5. varurl = 'http：//maps.google.cn/maps/api/geocode/json？latlng ='+latlon+'＆language = cn';
  6. $ .ajax（{
  7. タイプ：get、
  8. URL：URL、
  9. beforesend：function（）{
  10. $（＃google_geo）.html（ 'locating ...'）;
  11. }、
  12. 成功：function（json）{
  13. if（json.status == 'ok'）{
  14. varresults = json.results;
  15. $ .each（results、function（index、array）{
  16. if（index == 0）{
  17. $（＃google_geo）.html（array ['formatted_address']）;
  18. }
  19. }）;
  20. }
  21. }、
  22. エラー：function（xmlhttprequest、textStatus、errorthrown）{
  23. $（＃google_geo）.html（latlon+アドレスの場所が失敗しました）;
  24. }
  25. }）;
  26. }

上記のコードでは、BaiduマップインターフェイスとGoogleマップインターフェイスをそれぞれ関数showposition（）に統合し、実際の状況に従って呼び出すことができます。もちろん、これは単なるアプリケーションです。この簡単な例に基づいて、多くの複雑なアプリケーションを開発できます。モバイルブラウザを使用して、デモのデモンストレーションにアクセスすることをお勧めします。

関連記事