具有多種顏色和地理編碼器的標記

Question

試圖在我找到（並在此處）的網絡上使用一些不同的解決方案，但未使用我的腳本。

我使用Geocoder從不同的地方檢索動態緯度/經度，我想爲下面的例子設置不同的顏色標記，但它不工作（猜測是因爲循環）。所有標記都顯示爲綠色圖標。 我幾乎在那裏，任何人都可以請幫我一些想法？

<script> 
function initialize() { 
    var myOptions = { 
     zoom: 2, 
     panControl: true, 
     zoomControl: false, 
     mapTypeControl: false, 
     streetViewControl: false, 
     center: { 
      lat: 0, 
      lng: 0 
     }, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     mapTypeControl: false, 
     scrollwheel: false, 
    }; 
    var bounds = new google.maps.LatLngBounds(); 
    var map = new google.maps.Map(document.getElementById("google-container"), myOptions); 
    var geocoder = new google.maps.Geocoder(); 


     var locations = [ 
    ['Russia','http://maps.google.com/mapfiles/ms/icons/blue.png'],['Japan','http://maps.google.com/mapfiles/ms/icons/blue.png'],['London','http://maps.google.com/mapfiles/ms/icons/green.png'],['Brazil','http://maps.google.com/mapfiles/ms/icons/green.png']]; 

    var infowindow = new google.maps.InfoWindow(); 
    var marker, i; 


    for (i = 0; i < locations.length; i++) { 

    var address = locations[i][0]; 
    var icon_marker = locations[i][1]; 

    geocoder.geocode({ 
     'address': address 
    }, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 

      var marker = new google.maps.Marker({ 
       position: results[0].geometry.location, 
       map: map, 
       icon: icon_marker 
      }); 

      google.maps.event.addListener(marker, 'click', (function(marker, i) { 
       return function() { 
        infowindow.setContent(results[0].formatted_address); 
        infowindow.open(map, marker); 
       } 
       })(marker, i)); 

      bounds.extend(results[0].geometry.location); 
      map.fitBounds(bounds); 


     } else { 
      alert("Geocode of " + address + " failed," + status); 
     } 

    }); 


    } 
} 


google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

Answer 1

地理編碼器是異步的，當回調函數運行循環已經完成，並且icon_marker留集到陣列（綠色）中的最後一個值。

我會建議使用功能關閉（你正在做的與標記信息窗口的內容相關聯）與請求標記的屬性相關聯。

proof of concept fiddle

代碼片段：

function geocodeAddress(location, bounds, infowindow, geocoder, map) { 
 
    var address = location[0]; 
 
    var icon_marker = location[1]; 
 
    geocoder.geocode({ 
 
    'address': address 
 
    }, function(results, status) { 
 
    if (status == google.maps.GeocoderStatus.OK) { 
 

 
     var marker = new google.maps.Marker({ 
 
     position: results[0].geometry.location, 
 
     map: map, 
 
     icon: icon_marker 
 
     }); 
 

 
     google.maps.event.addListener(marker, 'click', function(evt) { 
 
     infowindow.setContent(results[0].formatted_address); 
 
     infowindow.open(map, marker); 
 
     }); 
 

 
     bounds.extend(results[0].geometry.location); 
 
     map.fitBounds(bounds); 
 
    } else { 
 
     alert("Geocode of " + address + " failed," + status); 
 
    } 
 

 
    }); 
 
} 
 

 
function initialize() { 
 
    var myOptions = { 
 
    zoom: 2, 
 
    panControl: true, 
 
    zoomControl: false, 
 
    mapTypeControl: false, 
 
    streetViewControl: false, 
 
    center: { 
 
     lat: 0, 
 
     lng: 0 
 
    }, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    mapTypeControl: false, 
 
    scrollwheel: false, 
 
    }; 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var map = new google.maps.Map(document.getElementById("google-container"), myOptions); 
 
    var geocoder = new google.maps.Geocoder(); 
 

 
    var locations = [ 
 
    ['Russia', 'http://maps.google.com/mapfiles/ms/icons/blue.png'], 
 
    ['Japan', 'http://maps.google.com/mapfiles/ms/icons/blue.png'], 
 
    ['London', 'http://maps.google.com/mapfiles/ms/icons/green.png'], 
 
    ['Brazil', 'http://maps.google.com/mapfiles/ms/icons/green.png'] 
 
    ]; 
 

 
    var infowindow = new google.maps.InfoWindow(); 
 

 
    for (i = 0; i < locations.length; i++) { 
 
    geocodeAddress(locations[i], bounds, infowindow, geocoder, map) 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#google-container { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="google-container"></div>