検索
ホームページウェブフロントエンドH5 チュートリアルHTML5 地理的位置 Geolocation-API および Haversine 地理空間距離アルゴリズム (グラフィックスとテキスト)

HTML5 は、地理的な位置座標を取得できる Geolocation-API を提供します
ただし、これは特定のニーズにのみ使用されます
たとえば、地図アプリケーション

は一般にほとんど使用されません

Geolocation-API

このメソッドもAPI は navigator.geolocation オブジェクトのプロトタイプに存在し、 navigator.geolocation.getCurrentPosition メソッドには 3 つのパラメーターがあります (必須)。エラー 位置情報の取得に失敗した場合のコールバック関数

オプション 構成情報パラメータオブジェクト

navigator.geolocation.getCurrentPosition(function(pos){
  console.log(pos);//获取位置信息对象Geoposition});

その後、ブラウザはクエリを開始します

結局、位置情報は個人情報とみなされます

  • ここでは、クリックするだけです位置情報の共有を許可するため

    すると、Chrome はローカルネットワーク情報を Google 位置情報サービスに送信します
  • (中国では Google が禁止されているため、壁を乗り越えることでのみ位置情報を取得できます〒▽〒)
  • コンソールに返されます

coord座標


accuracy測位精度(単位m)



高度高度

altitudeAccuracy高度精度(単位m)

  • 進行方向

    • 緯度緯度
    • 経度経度
    • 速度速度
    • タイムスタンプタイムスタンプ

    • <br/>
    • しかし、この座標はあまり正確ではありません(E特に PC 側)
    • から発生している可能性がありますIPアドレス、GPS、Wifi測位など
    • navigator.geolocation.getCurrentPosition(function(pos){
        console.log(pos);
      },function(err){
        console.log(err);
      });

      地理的位置情報の取得が間違っている場合に何らかの処理を行うために2番目のパラメータを設定できます
    • navigator.geolocation.getCurrentPosition(function(pos){
        console.log(pos);
      },function(err){
        console.log(err); //获取错误对象PositionError});
    • 例えば、今は位置情報の共有を拒否します

  • code = 1はユーザー拒否を意味します
code = 2は取得できないことを意味します



code = 3は接続タイムアウトを意味します

3番目のパラメータは構成情報を設定するために使用されます

navigator.geolocation.getCurrentPosition(function(pos){
  console.log(pos);
},function(err){
  console.log(err);
},{
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 3000});

  • enableHighAccuracy高精度の位置情報が必要です デフォルト false

  • timeout リクエストのタイムアウトを設定します(単位ms) デフォルト無限大無制限時間

  • maximumAge 位置情報の有効期限(単位ms) デフォルト0: 無条件に新しい地理位置情報を取得します


地理的位置 watchPosition を繰り返し取得する場合、このパラメーターは位置を再取得する頻度を指定します

  • watchPosition
  • watchPosition パラメーターと getCurrentPosition パラメーターは同じです

    違いは、watchPosition が位置情報を継続的に取得することです

    例:私たちが使用する測位ソフトウェア
  • 実行中に位置が変化し続ける場合、常に位置を再描画する必要があります
  • このようにして、座標が変化するたびに成功コールバック関数が呼び出されます


    そして watchPosiiton は watchID を返します

    ClearWatch (warchID) を渡します モニタリングをキャンセルします
  • タイマーをキャンセルするのと同様です
      var ID = navigator.geolocation.watchPosition(function(pos){  ...},function(err){  ...},{  ...});
      navigator.geolocation.clearWatch(ID);
    • clearWatch がパラメータを取らない場合

      、すべての watchPositions

    • Haversine アルゴリズム
時々

2 点間の距離を取得する必要がある場合があります

たとえば、近くに行くには食品注文アプリのビジネス

この時点で、Haversine アルゴリズムを使用して



function toRadians(degree) {
  return degree * Math.PI / 180;
}function haversine(latitude1, longitude1, latitude2, longitude2) {
  var R = 6371;  var deltaLatitude = toRadians(latitude2-latitude1);  
  var deltaLongitude = toRadians(longitude2-longitude1);
  latitude1 = toRadians(latitude1);
  latitude2 = toRadians(latitude2);  
  var a = Math.sin(deltaLatitude/2) * Math.sin(deltaLatitude/2) +    
  Math.cos(latitude1) * Math.cos(latitude2) *    
  Math.sin(deltaLongitude/2) * Math.sin(deltaLongitude/2);  
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));  
  var d = R * c;  return d;
}

2 点の座標を渡すことにより、地理的空間距離

を取得できます。ここで、
は地球の半径です6371km
もちろん、他のアルゴリズムもあります

時間と精度の点では異なります


以上がHTML5 地理的位置 Geolocation-API および Haversine 地理空間距離アルゴリズム (グラフィックスとテキスト)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
H5:HTMLの最新バージョンの探索H5:HTMLの最新バージョンの探索May 03, 2025 am 12:14 AM

html5isamajorrevision ofhtmlstandardthatedatedatizeizeswebdevelovement byintunwingnewsemanticelementsandcapabilities.1)itenhancesscodereadability and.2)html5EnableSricher、InteractiveEnceEnceEnceEncedienceEnceDirectembe、and.2)

基本を超えて:H5コードの高度な手法基本を超えて:H5コードの高度な手法May 02, 2025 am 12:03 AM

H5の高度なヒントには以下が含まれます。1。複雑なグラフィックスを使用して描画します。2。ウェブワーカーを使用してパフォーマンスを向上させます。これらのヒントは、開発者がよりダイナミックでインタラクティブで効率的なWebアプリケーションを構築するのに役立ちます。

H5:Webコンテンツとデザインの未来H5:Webコンテンツとデザインの未来May 01, 2025 am 12:12 AM

H5(HTML5)は、新しい要素とAPIを介してWebコンテンツと設計を改善します。 1)H5はセマンティックタグ付けとマルチメディアサポートを強化します。 2)キャンバスとSVGを導入し、Webデザインを濃縮します。 3)H5は、新しいタグとAPIを介してHTML機能を拡張することにより機能します。 4)基本的な使用には、それを使用したグラフィックの作成が含まれ、高度な使用法にはwebstorageapiが含まれます。 5)開発者は、ブラウザの互換性とパフォーマンスの最適化に注意を払う必要があります。

H5:Web開発の新機能と機能H5:Web開発の新機能と機能Apr 29, 2025 am 12:07 AM

H5は多くの新しい機能と機能をもたらし、Webページのインタラクティブ性と開発効率を大幅に改善します。 1。SEOの強化などのセマンティックタグ。 2.マルチメディアサポートは、オーディオとビデオの再生とタグを簡素化します。 3. Canvas Drawingは、動的なグラフィックスの描画ツールを提供します。 4.ローカルストレージは、LocalStorageとSessionStorageを介してデータストレージを簡素化します。 5. Geolocation APIは、ロケーションベースのサービスの開発を促進します。

H5:HTML5の重要な改善H5:HTML5の重要な改善Apr 28, 2025 am 12:26 AM

HTML5は5つの重要な改善をもたらします。1。セマンティックタグにより、コードの明確性とSEO効果が向上します。 2.マルチメディアサポートは、ビデオとオーディオの埋め込みを簡素化します。 3。フォームエンハンスメントは、検証を簡素化します。 4.オフラインおよびローカルストレージにより、ユーザーエクスペリエンスが向上します。 5。キャンバスとグラフィック機能は、Webページの視覚化を強化します。

HTML5:標準とWeb開発への影響HTML5:標準とWeb開発への影響Apr 27, 2025 am 12:12 AM

HTML5のコア機能には、セマンティックタグ、マルチメディアサポート、オフラインストレージ、ローカルストレージ、フォームエンハンスメントが含まれます。 1。コードの読みやすさとSEO効果を改善するためのセマンティックタグなど。 2.ラベルでマルチメディアの埋め込みを簡素化します。 3。アプリケーションキャッシュやLocalStorageなどのオフラインストレージとローカルストレージは、ネットワークのない操作とデータストレージをサポートします。 4.フォームエンハンスメントでは、処理と検証を簡素化するための新しい入力タイプと検証プロパティを導入します。

H5コードの例:実用的なアプリケーションとチュートリアルH5コードの例:実用的なアプリケーションとチュートリアルApr 25, 2025 am 12:10 AM

H5は、さまざまな新機能と機能を提供し、フロントエンド開発の機能を大幅に向上させます。 1.マルチメディアサポート:メディアを埋め込んで要素を埋め込み、プラグインは必要ありません。 2。キャンバス:要素を使用して、2Dグラフィックとアニメーションを動的にレンダリングします。 3。ローカルストレージ:ユーザーエクスペリエンスを改善するために、ローカルストレージとセッションストレージを介して永続的なデータストレージを実装します。

H5とHTML5の接続:類似性と相違点H5とHTML5の接続:類似性と相違点Apr 24, 2025 am 12:01 AM

H5とHTML5は異なる概念です。HTML5は、新しい要素とAPIを含むHTMLのバージョンです。 H5は、HTML5に基づくモバイルアプリケーション開発フレームワークです。 HTML5はブラウザを介してコードを解析およびレンダリングしますが、H5アプリケーションはコンテナを実行し、JavaScriptを介してネイティブコードと対話する必要があります。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール