Question

尝试在网上使用我发现的一些不同的解决方案（和这里），但是我的脚本无效。

我正在使用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>

Answer 1

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

我建议使用函数闭包将标记的属性与请求关联起来（正如您所做的那样，将infowindow内容与标记相关联）。

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>

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

1 个答案: