Google地图会在鼠标悬停时更改标记图形

Question

有人可以帮我解决为什么我的代码无法在鼠标悬停时更改标记图形的原因吗？我在每个mouseover / mouseout函数中都有marker.setIcon，但它似乎不起作用。

var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
				
				    var marker, i;
					var id = 'sites';
					
					for (i = 0; i < locations_beer.length; i++) {  
					  
					  var id = 'sites' + i;
					  
					  var contentString = '<div class="beer-map-popup">'+ locations_beer[i][0] +'<br /><img src="_img/beer-map-popup-wheat.png" border="0" /></div>';
					  		  
					  var infowindow = new google.maps.InfoWindow({
			      		content: contentString
			  		  });
			
			  
					 
			  		  marker = new google.maps.Marker({
				        position: new google.maps.LatLng(locations_beer[i][1], locations_beer[i][2]),
				        map: map
						,id: id
						,icon: 'http://www.ashtonbrewingcompany.com/_img/beermap-pin.png'
						,url: locations_beer[i][4]
						,zIndex:100
					  });
					  
					  var icon1 = "http://www.ashtonbrewingcompany.com/_img/beermap-pin-active.png";
					  var icon2 = "http://www.ashtonbrewingcompany.com/_img/beermap-pin.png";

				        
					  (function(infowindow) {
			
					        google.maps.event.addListener(marker, 'mouseover', function() {
					            infowindow.open(map, this);
								marker.setIcon("http://www.ashtonbrewingcompany.com/_img/beermap-pin-active.png");
					        });
					
					        google.maps.event.addListener(marker, 'mouseout', function() {
					            infowindow.close();
								marker.setIcon("http://www.ashtonbrewingcompany.com/_img/beermap-pin.png");
					        });
					   })(infowindow);
				    
					
			        }

Answer 1

您的mouseover / mouseout侦听器中的marker上没有功能关闭。 mouseover / mouseout侦听器函数内的this是标记。一种选择是将代码更改为使用this.setIcon(...)而不是marker.setIcon(...)。

proof of concept fiddle

代码段

function initialize() {
  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  var marker, i;
  var id = 'sites';
  var bounds = new google.maps.LatLngBounds();
  for (i = 0; i < locations_beer.length; i++) {

    var id = 'sites' + i;

    var contentString = '<div class="beer-map-popup">' + locations_beer[i][0] + '<br /><img src="_img/beer-map-popup-wheat.png" border="0" /></div>';

    var infowindow = new google.maps.InfoWindow({
      content: contentString
    });

    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations_beer[i][1], locations_beer[i][2]),
      map: map,
      id: id,
      icon: 'http://www.ashtonbrewingcompany.com/_img/beermap-pin.png',
      url: locations_beer[i][4],
      zIndex: 100
    });
    bounds.extend(marker.getPosition());
    var icon1 = "http://www.ashtonbrewingcompany.com/_img/beermap-pin-active.png";
    var icon2 = "http://www.ashtonbrewingcompany.com/_img/beermap-pin.png";


    (function(infowindow) {

      google.maps.event.addListener(marker, 'mouseover', function() {
        infowindow.open(map, this);
        this.setIcon("http://www.ashtonbrewingcompany.com/_img/beermap-pin-active.png");
      });

      google.maps.event.addListener(marker, 'mouseout', function() {
        infowindow.close();
        this.setIcon("http://www.ashtonbrewingcompany.com/_img/beermap-pin.png");
      });
    })(infowindow);
  }
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var mapOptions = {};
var locations_beer = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

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

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