谷歌地图地理编码并在2循环地理编码中添加div

时间:2013-01-28 23:23:30

标签: google-maps-api-3 maps geocode google-geocoder

我完全迷失了。 我有我的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

我认为问题是我必须放一个回调函数,因为这是地理编码循环中的异步方法导致麻烦......但是请问怎么样?!

1 个答案:

答案 0 :(得分: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));
});