javascript - 谷歌地图 : Issue regarding marker icons and geocoding

Question

我创建了一个jsp，在其中使用谷歌地图中的地理编码器类将地址转换为标记。现在我面临的唯一问题是，当我尝试更改标记的图标图像时，我只能获得所有标记的最后一个图标。

<script type="text/javascript">
var geocoder;  
var address = new Array();  
var marker = new Array();  
var images=["A","B","C","D","E","F","G","H","I","J","K","L"];  

function initialize()
{
var locations = new String("<%=request.getParameter("location")%>");  
locations=locations.substring(0,(locations.length)-1); 

var map = new google.maps.Map(document.getElementById('googleMap'), { 
   mapTypeId: google.maps.MapTypeId.ROADMAP,
   zoom: 8
});

if(locations=='null' || locations=='')
    locations = 'Pune, INDIA\;';

address = locations.split('\;');

marker[0] = new google.maps.Marker({
    map:map 
});

geocoder = new google.maps.Geocoder();
var i=1;
for(i=1; i<address.length; i++){
    geocoder.geocode({
          'address': address[i]+", India"
       },function(results, status){
          if(status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                map: map,  
                icon: 'http://www.google.com/mapfiles/marker'+images[i]+'.png',
                position: results[0].geometry.location
            });
            var info = new google.maps.InfoWindow({
                content: address[i]+', India'
            });
            google.maps.event.addListener(marker, 'click', function() {
                info.open(map, marker);
            });
          }
       });
}
geocoder.geocode({
    'address': address[0]+", India"
    },function(results, status){
      if(status == google.maps.GeocoderStatus.OK) {
         marker[0].setPosition(results[0].geometry.location);
         map.setCenter(results[0].geometry.location);
         new google.maps.Circle({
             center: results[0].geometry.location,
             radius: radius * 1000,       // Convert to meters
             fillColor: '#00ff00',
             fillOpacity: 0.2,
             map: map,
             strokeColor : '#0000ff',
             strokeOpacity : 0.3,
             strokeWeight: 1
        });
     }
});
}//End of initialize function.  
google.maps.event.addDomListener(window, 'load', initialize);
</script>

请帮忙!!!

Answer 1

这是一个常见问题(通常在 infowindows 中遇到)，可以通过函数闭包来解决(“createMarker”函数是一种选择)。

function createMarker(map, latlng, address, image) {
        var marker = new google.maps.Marker({
            map: map,  
            icon: 'http://www.google.com/mapfiles/marker'+image+'.png',
            position: latlng
        });
        var info = new google.maps.InfoWindow({
            content: address+', India'
        });
        google.maps.event.addListener(marker, 'click', function() {
            info.open(map, marker);
        });
  return marker;
}

在循环中调用它，如下所示:

geocoder.geocode({
      'address': address[i]+", India"
   },function(results, status){
      if(status == google.maps.GeocoderStatus.OK) {
        var marker = createMarker(results[0].geometry.location, address[i], images[i]);
      }
   });

working example (您发布的代码的行为与您所描述的不同，还包括地理编码操作的函数闭包)

更新:您还需要地址上的函数闭包(“geocodeAddress”函数):

function geocodeAddress(map, address, i) {
   geocoder.geocode({
      'address': address+", India"
   },function(results, status){
      if(status == google.maps.GeocoderStatus.OK) {
    var marker = createMarker(map, results[0].geometry.location, address, images[i]);
      }
   });
}

所以你的处理循环变成:

var i=1;
for(i=0; i<address.length; i++){
  geocodeAddress(map, address[i], i);
}

代码片段:

var geocoder;
var address = new Array();
var marker = new Array();
var images = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"];

function initialize() {
    var locations = 'Pune\;Mumbai\;';
    // locations=locations.substring(0,(locations.length)-1); 

    var map = new google.maps.Map(document.getElementById('googleMap'), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      zoom: 8
    });

    if (locations == 'null' || locations == '')
      locations = 'Pune, INDIA\;';

    address = locations.split('\;');

    marker[0] = new google.maps.Marker({
      map: map
    });

    geocoder = new google.maps.Geocoder();
    var i = 1;
    for (i = 0; i < address.length; i++) {
      geocodeAddress(map, address[i], i);
    }

    geocoder.geocode({
      'address': address[0] + ", India"
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        //         marker[0].setPosition(results[0].geometry.location);
        map.setCenter(results[0].geometry.location);
        new google.maps.Circle({
          center: results[0].geometry.location,
          radius: 1000, // radius * 1000,       // Convert to meters
          fillColor: '#00ff00',
          fillOpacity: 0.2,
          map: map,
          strokeColor: '#0000ff',
          strokeOpacity: 0.3,
          strokeWeight: 1
        });
      }
    });
  } //End of initialize function.  

function geocodeAddress(map, address, i) {
  geocoder.geocode({
    'address': address + ", India"
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var marker = createMarker(map, results[0].geometry.location, address, images[i]);
    }
  });
}

function createMarker(map, latlng, address, image) {
  var marker = new google.maps.Marker({
    map: map,
    icon: 'http://www.google.com/mapfiles/marker' + image + '.png',
    position: latlng
  });
  var info = new google.maps.InfoWindow({
    content: address + ', India'
  });
  google.maps.event.addListener(marker, 'click', function() {
    info.open(map, marker);
  });
  return marker;
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#googleMap {
  height: 100%;
  width: 100%;
}

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