首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >带距离的Gmaps.js路由

带距离的Gmaps.js路由
EN

Stack Overflow用户
提问于 2013-09-04 00:19:03
回答 3查看 10.1K关注 0票数 2

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

基本上,为了复制Google Maps的功能,我希望获得从一个地址到另一个地址的路径和距离(可以只是输入/表单域)。我注意到了this demo,但它需要点击地图,而且不显示总距离或驾驶时间?

对于从表单中解析2个地址,然后使用gmaps.js应用编程接口计算路线和行驶时间的最佳方法,您有什么看法吗?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2013-09-20 22:36:03

将其分解为需要执行以下操作的部分:

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

有关地理编码,请参阅此示例:http://hpneo.github.io/gmaps/examples/geocoding.html

代码语言:javascript
复制
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

代码语言:javascript
复制
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还将包含一个持续时间和距离,您可以在它们之间添加循环并访问类似以下内容:

代码语言:javascript
复制
foreach($directions->routes[0]->legs as $leg) {
    $time+=$leg.duration.value
    $distance+=$leg.distance.value
}

更新:

我使用了API -并原谅了嵌套的回调-但这里有一个有效的示例:http://jsfiddle.net/mdares/82Dp2/

代码语言:javascript
复制
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);
                                }
                            });

                        }
                    }
                });
            }
        }
    });
});
票数 9
EN

Stack Overflow用户

发布于 2013-09-25 14:26:26

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

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

  • Fiddle for miles: http://jsfiddle.net/DXNzu/
  • Fiddle for kilometers: http://jsfiddle.n.et/DXNzu/1/

JS

代码语言:javascript
复制
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问题here

票数 1
EN

Stack Overflow用户

发布于 2013-09-22 21:04:23

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18597009

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档