Геокодирование Google Maps и добавление div в 2 цикла геокодирования

Я полностью потерян. У меня есть html-форма, где я могу написать город. Когда форма отправляется, массив данных отправляется в каждом цикле, ниже приведен код:

geocoder = new google.maps.Geocoder();

$.each(data['list'],function(i,el)
{
    var address = el.address1+','+el.city+' '+el.zipcode;

    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var getZipCode = $("#zipcode").val();
            var getCity = $("#city").val();

            geocoder.geocode( { 'address': getCity+' '+getZipCode }, function(resultsTwo, statusTwo) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var distanceKm = google.maps.geometry.spherical.computeDistanceBetween(results[0].geometry.location, resultsTwo[0].geometry.location);
                    var distanceMiles = distanceKm/1000*0.621371;
                    str = str +'<article><div class="leftDesc"><header><h3><span class="letter">'+alphabet[i]+'.</span><a href="#" onclick="OpenWindowOnMap(\''+address+'\',\''+el.store_name+'\',\''+el.description+'\');">'+el.store_name+'</a></h3></header>';
                    str = str +'<div class="addressEnonce">Address:</div><div class="addressBig"><p class="address">'+el.address1+'</p>';
                    /*str = str +'<p>'+el.address2+'</p>';*/
                    str = str +'<br /><p class="city">'+el.city+'</p>';
                    str = str +' <p class="zipcode">'+el.zipcode+'</p>';
                    str = str +' <p class="state">'+el.state+'</p></div></div>';
                    str = str +'<div class="rightDesc"><p class="distance">Distance: '+distanceMiles+' Miles</p>';
                    str = str +'<p>'+el.description+'</p></div>';

                    str = str + '<p><a href="#" onclick="OpenWindowOnMap(\''+address+'\',\''+el.store_name+'\',\''+el.description+'\');">Show on Map</a></p>';

                    if((i+1) < data['list'].length){
                        switch(i % 4){
                            case 0:
                                str = str +'<img src="img/line.png" >';
                                break;
                            case 1:
                                str = str +'<img src="img/line.png" >';
                                break;
                            case 2:
                                str = str +'<img src="img/line.png" >';
                                break;
                        }
                    }

                    str = str +'</article>';
                    tweets.append(str);
                }
            });
        }
    });
})                              })

Итак, код хороший, например, для Вашингтона у меня будет показано 3 предмета, а я хочу иметь 2! Первый элемент в двойном =7

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


google-maps-api-3 maps geocode google-geocoder
person Boby Rotka    schedule 28.01.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Проблема в том, что он асинхронный. Вам нужно использовать замыкание. Вот пример:

$.each(data['list'],function(i,el) {
  var address = el.address1+','+el.city+' '+el.zipcode;
  geocoder.geocode( { 'address': address}, (function(address1, city, zipcode) {
      return function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          geocoder.geocode( { 'address': city+' '+zipcode },
              function(resultsTwo, statusTwo) {
                 // ...                     
          });
        }
      };
  })(el.address1, el.city, el.zipcode));
});
person Chad Killingsworth    schedule 29.01.2013