在函数外使用 javascript 数组的值

Question

我有一个 forloop，其中调用了一个函数。在该函数中，我将值推送到称为标记的数组。

有没有办法在 forloop 之外访问标记数组的值？

代码如下：

<script type="text/javascript"> 
    // arrays to hold copies of the markers and html used by the side_bar 
    // because the function closure trick doesnt work there 
    var map = null;
    geocoder = new google.maps.Geocoder();
    var side_bar_html = ""; 
    var icon = '';
    var markers = [];

    function codeAddress(this_address,index,callback) {
        geocoder.geocode( { 'address': this_address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                callback.call(window,index,results[0].geometry.location)
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
    }


    function initialize() {
        // create the map
        var myOptions = {
            zoom: 3,
            center: new google.maps.LatLng(46.90, -121.00),
            mapTypeControl: true,
            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
            navigationControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        google.maps.event.addListener(map, 'click', function() {
            infowindow.close();
        });


        for (var i = 0; i < businesses.length; i++) {
            codeAddress(businesses[i].address,i,function(i,point){
                var description = businesses[i].description;

                if(businesses[i].business_type == "Wine"){
                    //http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|00CC99|000000
                    icon = 'http://google-maps-icons.googlecode.com/files/wineyard.png';
                }else if(businesses[i].business_type == "Golf"){
                    icon = 'http://google-maps-icons.googlecode.com/files/golf.png';
                }else{
                    icon = 'http://google-maps-icons.googlecode.com/files/festival.png';
                }

                var marker = createMarker(point,businesses[i].name,description,icon);

                // put the assembled side_bar_html contents into the side_bar div
                document.getElementById("side_bar").innerHTML = side_bar_html;
            });//End codeAddress-function
        }//End for-loop

        console.log(markers);
        var markerCluster = new MarkerClusterer(map, markers);               

    }

    // A function to create the marker and set up the event window function 
    function createMarker(latlng, name, html,icon) {
        var contentString = html;
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: icon,
            zIndex: Math.round(latlng.lat()*-100000)<<5
            });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(contentString); 
            infowindow.open(map,marker);
        });

        // save the info we need to use later for the side_bar
        markers.push(marker);

        // add a line to the side_bar html
        side_bar_html += '<a href="javascript:myclick(' + (markers.length-1) + ')">' + name + '<\/a><br />'+html+'<br />';

    }

    var infowindow = new google.maps.InfoWindow({ 
        size: new google.maps.Size(150,50)
    });

    // This function picks up the click and opens the corresponding info window
    function myclick(i) {
        google.maps.event.trigger(markers[i], "click");
    }

</script>

如您所见，最后一行显示“var markerCluster = new MarkerCluster(map, markers);”这是我希望能够从中访问信息的地方。

谢谢！

Answer 1

问题是您没有考虑到对codeAddress 的调用的异步性质。您在循环中调用该函数，这会触发对 Google Maps API 的一系列调用。

你正在运行这一行：

var markerCluster = new MarkerClusterer(map, markers);

...甚至在回调被触发之前。

要修复，请维护一个计数器。每次触发回调时，该计数器都会增加 1。一旦它等于businesses.length，您就知道所有地址都已进行地理编码，并且所有标记都已添加到数组中。现在您可以创建MarkerCluster。

Answer 2

是的，在 for 循环之前声明它。

var markers
for(....

Answer 3

将标记的定义带到 for 循环之外 ...

var markers = new Array ();
for (var i = 0; i < businesses.length; i++) {
    markers[i] = ...