Question

我用循环来显示标记和信息窗口。但是infowindow只显示循环的最后一个值。

这是我正在使用的代码。

  function initialize()
    {
        try
        {
            var geocoder;
            var map;
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(41.511770, -72.809520);
            var mapOptions = {              
              center: latlng,
               zoom: 9,
            disableDefaultUI: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP 
            }
            map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
            var markers = JSON.parse('[{"address":"40C Leslie Road,Bridgeport,CT","Description":"Bridgeport - 82 Unit Community"},{"address":"56 Ironwood Road,West Hartford,CT","Description":"West Hartford - 45 Unit Community"}]');
            var infoWindow = new google.maps.InfoWindow();
           // var address;
            for (i = 0; i < markers.length; i++)
            {
                var address = markers[i];               
                geocoder.geocode({ 'address': address.address }, function (results, status)
                {
                    if (status == google.maps.GeocoderStatus.OK) 
                    {
                        //map.setCenter(results[0].geometry.location);
                        var marker = new google.maps.Marker({
                            map: map,
                            icon:'Images/pin.png',
                            position: results[0].geometry.location
                        });
                        google.maps.event.addListener(marker, "click", function (e)
                        {                       
                            infoWindow.setContent("<div style='border:0px solid red;height:auto;;width:auto;'>" + address.Description + "</div>");
                            infoWindow.open(map, marker);
                        });
                    }
                    else {
                        //alert("Geocode was not successful for the following reason: " + status);
                    }
                });

              //  map.setCenter(new google.maps.LatLng(41.511770, -72.809520))
            }
        }
       catch (ex)
        {
            alert(ex.message);
        }     
    }

    google.maps.event.addDomListener(window, "load", initialize);

请帮帮我。

谢谢， Venkat。

Answer 1

问题是geocoder.geocode是一个异步函数。换句话说，在请求完成检索值之前，您的执行将远离for循环。因此，您将获得相同的地址值，因为它是完成后的for循环的最后一个值，并且您将所有内容放在同一个var address = ...变量中。

要解决此问题，您需要将geocoder.geocode请求包含在自执行匿名函数中。因此，您的代码可以正常运行，因为var address = ...在其自身范围内与请求一起定义。见下面的例子：

...

// Start of self-executing anonymous function
(function() {

var address = markers[i];  

...

和

...

// End of self-executing anonymous function
})();

//  map.setCenter(new google.maps.LatLng(41.511770, -72.809520))

...

JS FIDDLE EXAMPLE （请记住激活您的图标图片，我已在该代码中将其停用。）

如需进一步阅读，建议您使用 self executing anonymous functions。

干杯。

Google Map infowindow显示循环的最后一个值

1 个答案: