2

私が構築している小さなプロジェクトでGmaps.js APIを使用しています。

基本的にGoogleマップの機能を複製するために、ある住所から別の住所へのルートと距離を取得しようとしています（入力/フォームフィールドにすることができます）。このデモに気付きましたが、地図をクリックする必要があり、合計距離や運転時間が表示されませんか?

フォームから 2 つの住所を解析し、gmaps.js API を使用してルートと運転時間を計算する最良の方法について意見はありますか?

4

3 に答える 3

9

これを必要な部分に分割すると、次のことが必要になります。

  1. フォームに入力した住所を検索し、ジオコーディング API を使用してジオコーディングします。
  2. ジオコーディングの結果を使用してルートを計算します。
  3. ルートから必要なデータを取得し、プロット/表示します

ジオコーディングについては、次の例を参照してください: http://hpneo.github.io/gmaps/examples/geocoding.html

GMaps.geocode({
  address: $('#Start').val(),
  callback: function(results, status) {
    if (status == 'OK') {
      var latlng1 = results[0].geometry.location;
    }
  }
}); //Repeat for destination / end point

これで、緯度/経度のポイントが得られました。

次に、ルーティングにいくつかのアプローチを取ることができますが、次の例のように描画するだけで済みます: http://hpneo.github.io/gmaps/examples/routes.html

map.drawRoute({
  origin: [latlng1.lat(), latlng1.lng()],
  destination: [latlng2.lat(), latlng2.lng()],
  travelMode: 'driving',
  strokeColor: '#131540',
  strokeOpacity: 0.6,
  strokeWeight: 6
});

getRoutes代わりに呼び出すとdrawRoute、オブジェクトが返されDirectionsResultます: https://developers.google.com/maps/documentation/javascript/directions#DirectionsResults。オブジェクトには、TransitDetails目的地までの移動時間に関する情報が到着時間の形式で含まれています。それぞれlegに期間と距離も含まれており、それらを合計してループし、次のようなものにアクセスできます。

foreach($directions->routes[0]->legs as $leg) {
    $time+=$leg.duration.value
    $distance+=$leg.distance.value
}

アップデート：

APIで遊んでいました-そしてネストされたコールバックを許します-しかし、ここに実際の例があります: http://jsfiddle.net/mdares/82Dp2/

jQuery(document).ready(function () {
    var map;
    var latlng1;
    var latlng2;

    GMaps.geocode({
        address: $('#Start').val(),
        callback: function (results, status) {
            if (status == 'OK') {
                latlng1 = results[0].geometry.location;
                GMaps.geocode({
                    address: $('#End').val(),
                    callback: function (results, status) {
                        if (status == 'OK') {
                            latlng2 = results[0].geometry.location;
                            map = new GMaps({
                                div: '#map',
                                lat: latlng1.lat(),
                                lng: latlng1.lng(),
                                zoom: 12
                            });

                            map.drawRoute({
                                origin: [latlng1.lat(), latlng1.lng()],
                                destination: [latlng2.lat(), latlng2.lng()],
                                travelMode: 'driving',
                                strokeColor: '#131540',
                                strokeOpacity: 0.6,
                                strokeWeight: 6
                            });
                            map.getRoutes({
                                origin: [latlng1.lat(), latlng1.lng()],
                                destination: [latlng2.lat(), latlng2.lng()],
                                callback: function (e) {
                                    var time = 0;
                                    var distance = 0;
                                    for (var i=0; i<e[0].legs.length; i++) {
                                        time += e[0].legs[i].duration.value;
                                        distance += e[0].legs[i].distance.value;
                                    }
                                    alert(time + " " + distance);
                                }
                            });

                        }
                    }
                });
            }
        }
    });
});
于 2013-09-20T14:36:02.603 に答える
1

点 A と点 B の間の距離だけを気にし、曲がり角ごとの方向を気にしない場合は、2 つの点の座標を取得して距離を計算するだけの簡単な作業で済みます。

例 - ニューヨーク市の中心からフィラデルフィアの中心までの距離を計算する

JS

function distanceFrom(points) {
    var lat1 = points.lat1;
    var radianLat1 = lat1 * (Math.PI / 180);
    var lng1 = points.lng1;
    var radianLng1 = lng1 * (Math.PI / 180);
    var lat2 = points.lat2;
    var radianLat2 = lat2 * (Math.PI / 180);
    var lng2 = points.lng2;
    var radianLng2 = lng2 * (Math.PI / 180);
    var earth_radius = 3959; // or 6371 for kilometers
    var diffLat = (radianLat1 - radianLat2);
    var diffLng = (radianLng1 - radianLng2);
    var sinLat = Math.sin(diffLat / 2);
    var sinLng = Math.sin(diffLng / 2);
    var a = Math.pow(sinLat, 2.0) + Math.cos(radianLat1) * Math.cos(radianLat2) * Math.pow(sinLng, 2.0);
    var distance = earth_radius * 2 * Math.asin(Math.min(1, Math.sqrt(a)));
    return distance.toFixed(3);
}

var distance = distanceFrom({
    // NYC
    'lat1': 40.713955826286046,
    'lng1': -74.00665283203125,
    // Philly
    'lat2': 39.952335,
    'lng2': -75.163789
});

結果は 80.524マイルまたは129.583キロメートルです。

ユーザーが座標の代わりに都市名や郵便番号などを入力できるようにしたい場合は、GMaps ライブラリを使用して、最初に住所をジオコーディングできます。

関連するSOの質問はこちら

于 2013-09-25T06:26:25.733 に答える
0

gebweb optimap tsp ソルバーを試すことができます。また、旅行セールスマンの問題も解決できます。リンク: http://www.gebweb.net/optimap/

于 2013-09-22T13:04:22.570 に答える