Как я могу получить расстояния от карт Google javascript api v3 - PullRequest
Новая
       11

Как я могу получить расстояния от карт Google javascript api v3

3 голосов
/ 24 февраля 2011

Я пытаюсь отсортировать массив расстояний, созданных картами Google.Мне нужно заказать мой список, ближайший к дальней.Я могу получить все направления и расстояния, отображаемые просто отлично с примером API directionsService, но я не могу понять, как извлечь эту информацию за пределы функции, чтобы я мог ее отсортировать. 

    function calcDistances() {
    for (var x = 0; x < wineries.length; x++) {
        var winery = wineries[x];
        var trdistances = [];       
        var request = {
            origin: map.getCenter(), 
            destination: new google.maps.LatLng(winery[1], winery[2]),
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };

        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                var route = response.routes[0];
                var summaryPanel = document.getElementById("tasting_rooms_panel");
                // For each route, display summary information.
                for (var i = 0; i < route.legs.length; i++) {
                    //this works fine and displays properly
                    summaryPanel.innerHTML += route.legs[i].distance.text;
                    //I want to store to this array so that I can sort
                    trdistances.push(route.legs[i].distance.text);
                }
            }
        });
        alert(trdistances[0]);//debug
    }
}

Как прокомментированов коде я могу заполнить summaryPanel.innerHTML, но когда я заполняю значения trdistances массива, предупреждение выдает мне «undefined».Это какая-то новенькая ошибка кодирования javascript?Я прочитал о области видимости переменных, и это должно работать.Помоги мне, мудрые.

1 Ответ

3 голосов
/ 25 февраля 2011 
function calcDistances() {
    for (var x = 0; x < wineries.length; x++) {
        var winery = wineries[x];
        var trdistances = [];       
        var request = {
            origin: map.getCenter(), 
            destination: new google.maps.LatLng(winery[1], winery[2]),
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };

        //Using Closure to get the right X and store it in index
        (function(index){
               directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                         var route = response.routes[0];
                         var summaryPanel = document.getElementById("tasting_rooms_panel");
                         // For each route, display summary information.
                         for (var i = 0; i < route.legs.length; i++) {
                              //this works fine and displays properly
                              summaryPanel.innerHTML += route.legs[i].distance.text;
                              //I want to store to this array so that I can sort
                              trdistances.push(route.legs[i].distance.text);
                         }

                         if(index == wineries.length-1){  //check to see if this is the last x callback
                              console.log(trdistances); //this should print the result 
                              //or in your case you can create  global function that gets called here like sortMahDistance(trdistances); where the function does what you want.
                              printMyDistances(trdistances); //calls global function and prints out content of trdistances console.log();
                         }
                    }
               });
        })(x);  //pass x into closure as index
    }
}

//on global scope
function printMyDistances(myArray){
     console.log(myArray);
}

Проблема в том, что нужно следить за циклом for X. По сути, вы должны убедиться, что все обратные вызовы выполнены, прежде чем вы сможете получить окончательный результат trdistances. Таким образом, вам придется использовать замыкание для достижения этой цели. Сохраняя сначала для циклов 'X в index в закрытии, передавая X в виде index, вы можете проверить, является ли обратный вызов последним, и если это так, то ваш trdistances должен быть ваш конечный результат. Этот мод вашего кода должен работать, но если нет, пожалуйста, оставьте комментарий.

Кроме того, я разметил свою собственную версию карты Google с помощью замыкания, чтобы разрешить ее с помощью асинхронных DirectionServices внутри цикла for, и это сработало. Вот мое демо jsfiddle . Проследите вывод console.log();, чтобы увидеть X против index внутри замыкания.

...