私は完全に迷っています。私は都市を書くことができる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 にあります
問題は、コールバック関数を配置する必要があることだと思います。これは、トラブルの原因となるジオコード ループの非同期メソッドであるためです。