Javascript 谷歌地图API-悬停在标记上并显示图像
我试图让一个谷歌地图实例显示一组标记，然后当你将鼠标悬停在一个特定的标记上时，将其更改为一个更大的图像。我想它恢复到原来的标记图像时，鼠标离开新的图像区域。在这个JSFIDLE中，我似乎让它按照我所希望的那样工作： 唯一的问题是，我在测试版网站上使用了相同的代码，但效果不一样。在这个网站上，更改不会发生在mouseover/mouseout上，而是onclick上Javascript 谷歌地图API-悬停在标记上并显示图像,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我试图让一个谷歌地图实例显示一组标记，然后当你将鼠标悬停在一个特定的标记上时，将其更改为一个更大的图像。我想它恢复到原来的标记图像时，鼠标离开新的图像区域。在这个JSFIDLE中，我似乎让它按照我所希望的那样工作： 唯一的问题是，我在测试版网站上使用了相同的代码，但效果不一样。在这个网站上，更改不会发生在mouseover/mouseout上，而是onclick上 这张地图正好显示了我们正在改变的地方。试试这个 <!DOCTYPE html> <html>
这张地图正好显示了我们正在改变的地方。试试这个
<!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>
这确实有用，谢谢。我仍然不清楚为什么我的原始代码不能在网站上正常工作。也许你可以澄清一下，让我知道？如果我的答案是正确的，请接受我只是在一个初始化函数中添加了你的代码，并在mapOptions块之后添加了地图创建，其余的都是正确的。另一个问题给你。。如何在mouseover事件中加载不同的图像？现在，我只是将其硬编码到一个图像中，但希望能够为每个元素提取locations_programs数组中使用的图像。尝试将此添加到鼠标悬停侦听器中。首先，检查代码中是否包含全局位置_程序的声明。否则，尝试在回调函数中传递该值
<!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>