具有多种颜色和地理编码器的标记答案

【问题标题】：Markers with multiple colours and Geocoder具有多种颜色和地理编码器的标记
【发布时间】：2015-12-08 06:36:36
【问题描述】：

尝试使用我在网络上找到（和此处）但不适用于我的脚本的一些不同解决方案。

我正在使用 Geocoder 从不同位置检索动态 lat/lng，我想为标记设置不同的颜色，如下例所示，但它不起作用（猜测是因为循环）。所有标记都显示为绿色图标。我快到了，有人可以帮我出主意吗？

<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>

【问题讨论】：

您发布的代码中有拼写错误（位置数组中缺少“，”）
嗨@geocodezip，已修复，但仍不会更改标记的颜色。 tks！
我并没有暗示这是您的代码的问题，只是您没有实际测试您在问题中提供的代码。

标签： javascript google-maps google-maps-api-3

【解决方案1】：

地理编码器是异步的，当回调函数运行时，循环已经完成，icon_marker 被设置为数组中的最后一个值（绿色）。

我建议使用函数闭包将标记的属性与请求相关联（就像您将信息窗口内容与标记相关联一样）。

proof of concept fiddle

代码 sn-p：

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>

【讨论】：