javascript - Gmaps.js 路线与距离

Question

我正在使用Gmaps.js api在我正在构建的一个小项目中。

基本上是为了复制 Google map 功能，我希望获取从一个地址到另一个地址的路线和距离(可以只是输入/表单字段)。我注意到this demo ，但是需要点击 map ，而且不显示总距离或行驶时间？

对于从表单中解析 2 个地址，然后使用 gmaps.js api 计算路线和行驶时间的最佳方法有什么意见吗？

Answer 1

将其分解为您需要的部分:

1. 搜索您在表单中输入的地址，并使用地理编码 API 对它们进行地理编码。
2. 使用地理编码结果来计算路线。
3. 从 route 提取所需数据并绘制/显示

对于地理编码，请参阅此示例: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 对象包含以到达时间形式到达终点位置的行程时间信息。每条腿还将包含一个持续时间和距离，您可以将它们循环起来并访问如下内容:

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);
                                }
                            });

                        }
                    }
                });
            }
        }
    });
});