Gmaps.js距离路线

时间:2013-09-03 16:19:03

标签: javascript jquery google-maps maps gmaps.js

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

基本上为了复制Google地图功能,我希望获得路线&从一个地址到另一个地址的距离(可以只是输入/表单字段)。 我注意到this demo,但它需要点击地图,而且还没有显示总距离或行车时间?

关于从表单解析2个地址的最佳方法的任何意见,然后使用gmaps.js api计算路由和驱动时间?

3 个答案:

答案 0 :(得分:8)

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

  1. 搜索表单输入的地址,并使用地理编码API对其进行地理编码。
  2. 使用地理编码的结果来计算路线。
  3. 从路线中拉出所需数据并绘制/显示
  4. 对于地理编码,请参阅此示例: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#DirectionsResultsTransitDetails对象以到达时间的形式包含到达终点位置的旅行时间的信息。每个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);
                                    }
                                });
    
                            }
                        }
                    });
                }
            }
        });
    });
    

答案 1 :(得分:1)

好吧,如果你只关心A点和B点之间的距离,而不是转弯方向 - 它应该像获取两点的坐标并计算距离一样简单。

示例 - 计算从纽约市中心到费城中心的距离

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库来首先对地址进行地理编码。


相关问题here

答案 2 :(得分:0)

您可以尝试gebweb optimap tsp解算器。它还可以解决旅行销售问题。链接:http://www.gebweb.net/optimap/