Google Maps API V3功能关闭用于标记循环

时间:2012-11-16 11:08:08

标签: javascript google-maps closures

我一直在阅读stackoverflow中的其他条目,但我真的无法理解它是如何工作的:

            for(a in elements){
                var address = elements[a].location;                       

                var contentString = '<table>';

                for(b in elements[a].other_fields){
                    var current = elements[a].other_fields[b];

                    switch(current.type){
                        case "text":
                            contentString += "<tr><td class = 'the_title'>" + current.label + ":</td><td class = 'the_value'>" + current.values[0].value + "</td></tr>";
                        break;
                        case "date":
                            if(!current.values[0].end){
                                var end_date_output_string = "";
                            }else{ 
                                var end_date_output_string = " -> " + current.values[0].end;
                            }
                            contentString += "<tr><td class = 'the_title'>" + current.label + ":</td><td class = 'the_value'>" + current.values[0].start + end_date_output_string + "</td></tr>";
                        break;
                    }
                }

                contentString += "</table>";  
                contentString += "<input type = 'button' onclick = 'window.open(\"" + elements[a].url + "\");' value = 'Open in Podio'>";

                geocoder.geocode( { 'address': address}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        map.setCenter(results[0].geometry.location);
                        alert(contentString);
                        addMarker(results[0].geometry.location);    
                    } else {
                        alert("Geocode was not successful for the following reason: " + status);
                    }
                });      
                //open_info_window(a, contentString);  
            } 



                                function addMarker(location) {
                                    var marker_copy = new google.maps.Marker({
                                        position: location, 
                                        map: map 
                                    });   

                                    marker = marker_copy;

                                    markersArray.push({
                                        "marker": marker,
                                        "info_window": null
                                    });  

                                    alert("marker added: " + markersArray.lenght);  
                                }   

                                // Opens info windows
                                function open_info_window(key, contentString) { 
                                    var infowindow = new google.maps.InfoWindow({
                                        content: contentString
                                    });     

                                    alert(key);

                                    markersArray[key].info_window = infowindow;

                                    google.maps.event.addListener(markersArray[key].marker, "click", function() {
                                        markersArray[key].info_window.open(map, markersArray[key].marker);
                                    });
                                }

我尝试警告(contentString)的部分不会提醒我的期望和它与闭包有关但我实际上从未遇到过这样的代码。你有机会给我一些帮助。

我想创建一个infowindow,其中包含我要添加的标记的contentString。

2 个答案:

答案 0 :(得分:1)

我假设您会在alert中看到最后一次迭代的结果,这在this blog post中有详细解释。

在你的情况下,我会改变执行的顺序:你有一个调用geocoder.geocode的外部循环:

for(a in elements) {
        var address = elements[a].location;                       
        (function (element) {
            geocoder.geocode( { 'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    doAlert(element);
                    addMarker(results[0].geometry.location);    
                } else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
        })(elements[a]);
} 

使用函数doAlert

var doAlert = function(element) {
            var contentString = '<table>';

            for(b in element.other_fields){
                var current = element.other_fields[b];

                switch(current.type){
                    case "text":
                        contentString += "<tr><td class = 'the_title'>" + current.label + ":</td><td class = 'the_value'>" + current.values[0].value + "</td></tr>";
                    break;
                    case "date":
                        if(!current.values[0].end){
                            var end_date_output_string = "";
                        }else{ 
                            var end_date_output_string = " -> " + current.values[0].end;
                        }
                        contentString += "<tr><td class = 'the_title'>" + current.label + ":</td><td class = 'the_value'>" + current.values[0].start + end_date_output_string + "</td></tr>";
                    break;
                }
            }

            contentString += "</table>";  
            contentString += "<input type = 'button' onclick = 'window.open(\"" + elements[a].url + "\");' value = 'Open in Podio'>";

            alert(contentString);
      }

答案 1 :(得分:1)

是的,我想出来了

        function codeAddress(){
            for(a in elements){ 
                (function(a){   
                    var address = elements[a].location;  

                    geocoder.geocode( { 'address': address}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            map.setCenter(results[0].geometry.location);
                            addMarker(results[0].geometry.location); 
                            alert(a);
                            var the_string = generate_string(elements, a);

                            infowindow[a] = new google.maps.InfoWindow({
                                content: the_string
                            });     

                            google.maps.event.addListener(markersArray[a], "click", function() {
                                infowindow[a].open(map, markersArray[a]);
                            });
                        } else {
                            alert("Geocode was not successful for the following reason: " + status);
                        }
                    });       
                })(a);        
            } 
        }     

诀窍就是这样做,我不知道它是如何工作的但它有效:

(function(a){   
})(a);

我假设a是函数的构造函数,因此它不是由变量引用创建的,而是由实际的迭代器本身创建的。哦,上帝,我不知道。 YIPPEE