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

Question

我已经创建了下面的地图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); 
    } 
}