1

以下のマップ API を作成し、データベースから取得した住所の配列を持っています。マップは正しく読み込まれますが、次の問題があります。

  1. ダイナミック マーカーは「i」の値でインクリメントされないため、マップにはすべてのマーカーが「1,2,3,4,5」ではなく「1」で表示されます。

    // 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
            });         
        }
    });
    }
}
4

1 に答える 1

0

ここでは、古い「関数スコープ ラッパー」のトリック(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);
    }
}
于 2012-05-04T02:00:14.890 に答える