javascript - 如何获取 Google Maps 3 Directions Service API 来区分多条路线?

标签 javascript jquery google-maps-api-3

我正在使用Google Maps API获取多条路线的行驶距离。每条路线由不同的司机行驶;它们都有相同的起点但不同的终点,并且可能有多个路径点。

我遇到的问题是 API 似乎没有给我任何命名每条路线的方法,所以当它们异步返回时,我无法确定哪条路线属于哪个驱动程序。确实,每条路线都有不同的地址,但 DirectionsService 响应对象返回的地址与我发送的地址略有不同 - 例如,“Des Plaines, IL”变为“Des Plaines, IL, USA” - 使其比较不可靠那些。

API 似乎不允许我通过请求对象发送任意字符串来对它们进行唯一命名。那我能做什么呢?

可能有助于阐明我在做什么的代码片段:

$.getJSON(ajaxsource, function(data) {
    var darr = data.driver_info, // includes driver name, start and end addresses
        driver, start, end,
        waypts = [];
    for (var i=0,j=darr.length; i<j; i++) {
        if (driver==$.trim(darr[i][8])) { // same driver, next destination
            //  start = end;
            waypts.push({
                location: end,
                stopover: true });
        } else {
            waypts = [];
            driver = $.trim(darr[i][8]);
            start = $.trim(darr[i][4]);
        }
        end = $.trim(darr[i][2]);

        if (i+1==j || driver!=$.trim(darr[i+1][8])) { 
            var request = { // route object
                origin: start,
                destination: end,
                waypoints: waypts,
                optimizeWaypoints: true,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };
            directionsDisplay = new google.maps.DirectionsRenderer();
            directionsService.route(request, function(response, status) {
                var legs = response.routes[0].legs;
                // console.log(response);
                for (var k=0; k<legs.length; k++) {
                    $('#results').append($('<li>').html("Driver " + driver + 
                        "<br>starts at " + legs[k].start_address + 
                        "<br>and drives " + legs[k].distance.text + 
                        "<br>to end at " + legs[k].end_address));
                }
            });
        };

    }; // end for
}); // end getJSON

该代码将根据需要返回所有路线信息,但由于它是异步的,因此每个结果中的 driver 是我的 data.driver_info 中列出的最后一个驱动程序的名称> 数组。我需要的是列出应与该特定路线关联的驱动程序。

最佳答案

在循环中设置一个 var loc_driver = driver; ,以便您可以将其放在 for 循环本地,然后在回调中使用该值,而不是依赖关于“全局”(至少,相对于整个 getJSON 调用)值。

对 DirectionService 的回调具有来自 for 循环和整个 function(data){ ... } 的作用域变量。

问题是 driver 随着 for 循环的每次传递而改变,并且您的回调使用该“全局”driver。相反,如果您设置一个仅存在于每个 for 循环范围内的变量,并且回调依赖于该变量,那么问题就解决了。

编辑:可能存在一些引用与值问题,所以在方便的地方声明如何:

callbackFactory = function(driver) {
   return function(request, status) {
     var legs = response.routes[0].legs;
     console.log(response);
     for (var k=0; k<legs.length; k++) {
        $('#results').append($('<li>').html("Driver " + driver +
             "<br>starts at " + legs[k].start_address + 
             "<br>and drives " + legs[k].distance.text + 
             "<br>to end at " + legs[k].end_address));
     }
   };
};

然后在你的控制结构中:

directionsService.route(request, callbackFactory(driver));

关于javascript - 如何获取 Google Maps 3 Directions Service API 来区分多条路线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12497609/

相关文章:

javascript - Protractor 中的 by.tagName 与 by.css

javascript - 如何从 Native JSON 动态更新 jQuery Flot

javascript - Ubuntu 11.04 上的 Javascript 使用什么 IDE?

javascript - 一张 Google map 上具有多种颜色的多个多边形

javascript - 无法初始化 Angular-Google-maps

javascript - 如何使可滚动元素可拖动?

javascript - div 的innerHTML 没有任何内容

javascript - $ (".anything".click() 和 $ (".anything").bind(click) 有什么区别

java - GWT Google Maps V3 覆盖小部件

javascript - 传单 js : Uncaught TypeError: Cannot read property 'addLayer' of undefined