谷歌地图在鼠标悬停时改变标记图形

Google Maps change marker graphic on mouseover

本文关键字：图形 改变 鼠标 悬停 谷歌地图      更新时间：2023-09-26

有人能帮我弄清楚为什么我下面的代码不能改变鼠标悬停上的标记图形?我有记号笔。在每个mouseover/mouseout函数中使用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);
				    
					
			        }

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

概念验证

代码片段: 

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>

相关文章：