google-maps - 动态标记 - Google Maps API - 标记不随循环中的 i 值递增

Question

我在下面创建了 maps api，并有一组来自数据库的地址。地图正确加载，但是我有以下问题。

1. 动态标记不会随着“i”的值增加。所以地图显示所有标记为“1”而不是“1,2,3,4,5”

   // Define Vars
   var pinColor = "FE7569";
   var marker, i;
   
   // Set default map center location
   var latlng = new google.maps.LatLng(-27.79014,153.18049);
   
   // Create pinShadow for each marker 
   var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com        /chart?chst=d_map_pin_shadow",
       new google.maps.Size(40, 37),
       new google.maps.Point(0, 0),
       new google.maps.Point(12, 35));
   
   // Function to create the dynamic marker
   function pinImage(i){
       return image = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/"+i+"/"+pinColor+"/", new google.maps.Size(21, 34), new google.maps.Point(0,0), new google.maps.Point(10, 34));
   }
   
   // Function to run once page has loaded
       function initialize(){      
   // Set Default settigns for google map
   var settings = {
       zoom: 10,
       center: latlng,
       mapTypeControl: true,
       mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
       navigationControl: true,
       navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
       mapTypeId: google.maps.MapTypeId.ROADMAP};
   
   // Start Google Maps and assign it to div on site
   var map = new google.maps.Map(document.getElementById("map_canvas"), settings);     
   
   // loop though total numner of address in array
   for (i = 1; i < total; i++) {  
       // Use geocoder to grab latlong for user inputed address
       geocoder.geocode( { 'address': address[i]}, function(results, status) {
           if (status == google.maps.GeocoderStatus.OK) {
               // Redefine map center location
               if (i = 1){ map.setCenter(results[0].geometry.location); }
   
               // Create dynamic markers on map as per the address array
               var marker = new google.maps.Marker({
                   map: map, 
                   position: results[0].geometry.location,
                   title:address[i],
                   zIndex: i,
                   // PROBLEM CODE --- Using the function below it creates all Markers with a "1" instead of the "i" value..??  
                   icon: pinImage(i),
                   shadow: pinShadow
               });         
           }
       });
       }
   }
   

Answer 1

旧的“函数范围包装器”技巧(function(i) {...})(i)在这里有效。没有它，执行将采用 i 的最终值。还有，if(i = 1)应该if(i == 1)

玩：http: //jsfiddle.net/BK8vv/

for (var i = 1; i < total; i++) {  
   (function(i) {

    // Use geocoder to grab latlong for user inputed address
    geocoder.geocode( { 'address': address[i]}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            // Redefine map center location
            if (i == 1){ map.setCenter(results[0].geometry.location); }

            // Create dynamic markers on map as per the address array
                    alert(i);
            var marker = new google.maps.Marker({
                map: map, 
                position: results[0].geometry.location,
                title:address[i],
                zIndex: i,
                // PROBLEM CODE --- Using the function below it creates all Markers with a "1" instead of the "i" value..??  
                icon: pinImage(i),
                shadow: pinShadow
            });         
        }
       });
     })(i);
    }
}