1

私は完全に迷っています。私は都市を書くことができる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 つのアイテムが必要です。最初のアイテムはダブル 1 = 7 にあります

問題は、コールバック関数を配置する必要があることだと思います。これは、トラブルの原因となるジオコード ループの非同期メソッドであるためです。

4

1 に答える 1

0

非同期であるという事実が問題です。クロージャーを使用する必要があります。次に例を示します。

$.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));
});
于 2013-01-29T13:11:57.023 に答える