我正在尝试让 Google map 实例显示一堆标记，然后当您将鼠标悬停在特定标记上时将其更改为更大的图像。我希望当鼠标离开新图像区域时它恢复到原始标记图像。我似乎让它在这个 JSfiddle 中按照我想要的方式工作:
https://jsfiddle.net/vn9po27c/2/
var locations_programs = [
['Christie Lake Camp', 44.803033, -76.418031, 1, 'http://www.christielakekids.com/_images/map_pins/events/canoe-for-kids.png', ''],
['Caldwell Community Centre', 45.373083, -75.735550, 1, 'http://www.christielakekids.com/_images/map_pins/events/caldwell-community-centre.png', ''],
['Dempsey Community Centre', 45.401887, -75.627530, 1, 'http://www.christielakekids.com/_images/map_pins/events/dempsey-community-centre.png', ''],
['Brewer Arena', 45.389560, -75.691445, 1, 'http://www.christielakekids.com/_images/map_pins/events/brewer-arena.png', '']
];
var markersArray = [];
var markers = {};
var mapOptions = {
center: new google.maps.LatLng(45.4214, -75.6919),
zoom: 10,
scrollwheel: true,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_TOP
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
};
//*** PROGRAMS
var marker, i;
var id = 'programs';
for (i = 0; i < locations_programs.length; i++) {
var id = 'programs' + i;
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations_programs[i][1], locations_programs[i][2]),
map: map
,id: id
,icon: 'http://www.christielakekids.com/_images/new/blue_circle.png'
,url: locations_programs[i][5]
,zIndex:100
});
google.maps.event.addListener(marker, 'mouseover', function(event) {
this.setIcon('http://www.christielakekids.com/_images/map_pins/events/canoe-for-kids.png');
});
google.maps.event.addListener(marker, 'mouseout', function(event) {
this.setIcon('http://www.christielakekids.com/_images/new/blue_circle.png');
});
}
唯一的问题是我在测试版网站上使用相同的代码，但它的工作方式不一样。在此网站上，更改不会发生在鼠标悬停/鼠标移出时，而是发生在单击时。
http://www.christielakekids.com/newsite/
这是“我们正在做出改变的地方”下方显示的 map 。
最佳答案
试试这个似乎有效
<!DOCTYPE html>
<html>
<head>
<title>test sandbox 8</title>
<style type="text/css">
#main {
margin: 60px 15px;
}
#map {
min-height: 600px;
min-width: 800px;
}
</style>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
<script>
// code to draw map
var map;
var col = '#FF0000';
var link ;
var latLng;
var polypoints;
function initialize() {
var locations_programs = [
['Christie Lake Camp', 44.803033, -76.418031, 1, 'http://www.christielakekids.com/_images/map_pins/events/canoe-for-kids.png', ''],
['Caldwell Community Centre', 45.373083, -75.735550, 1, 'http://www.christielakekids.com/_images/map_pins/events/caldwell-community-centre.png', ''],
['Dempsey Community Centre', 45.401887, -75.627530, 1, 'http://www.christielakekids.com/_images/map_pins/events/dempsey-community-centre.png', ''],
['Brewer Arena', 45.389560, -75.691445, 1, 'http://www.christielakekids.com/_images/map_pins/events/brewer-arena.png', '']
];
var markersArray = [];
var markers = {};
var mapOptions = {
center: new google.maps.LatLng(45.4214, -75.6919),
zoom: 10,
scrollwheel: true,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_TOP
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
};
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
//*** PROGRAMS
var marker, i;
var id = 'programs';
for (i = 0; i < locations_programs.length; i++) {
var id = 'programs' + i;
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations_programs[i][1], locations_programs[i][2]),
map: map
,id: id
,icon: 'http://www.christielakekids.com/_images/new/blue_circle.png'
,url: locations_programs[i][5]
,zIndex:100
});
google.maps.event.addListener(marker, 'mouseover', function(event) {
this.setIcon('http://www.christielakekids.com/_images/map_pins/events/canoe-for-kids.png');
});
google.maps.event.addListener(marker, 'mouseout', function(event) {
this.setIcon('http://www.christielakekids.com/_images/new/blue_circle.png');
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
关于javascript - Google map API - 将鼠标悬停在标记上并显示图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31548635/