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

HTML5 地理的位置 Geolocation-API および Haversine 地理空間距離アルゴリズム (グラフィックスとテキスト)

黄舟
黄舟オリジナル
2017-03-11 16:13:263103ブラウズ

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 までご連絡ください。