【发布时间】：2016-03-20 20:16:32
【问题描述】：
我在 Google 地图上将多个事件显示为标记。
悬停在事件上会改变标记颜色。 （见下图）。
多个事件可以在同一个地址发生。
这是我的问题，因为事件的标记可以隐藏在最新事件的后面，然后就不可能看到在哪里 事件通过将鼠标悬停在其上发生。
如果在同一个地方发生多个事件，如何查看标记颜色的变化？
这是一个有效的 Fiddle，事件 3 隐藏在事件 4 后面：http://jsfiddle.net/5qk4zqz4/110/
这里是代码：
var geocoder;
var infoWindow = new google.maps.InfoWindow();
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var name = "Event1";
var address = "address 1";
var point = new google.maps.LatLng(42, -72);
var html = "<b>" + name + "</b> <br/>" + address;
var image1 = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
var image2 = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
var i = 0;
createMarker(point,html, i, map);
point = new google.maps.LatLng(42.02, -72.02);
name = "Event2";
address = "address 2";
html = "<b>" + name + "</b> <br/>" + address;
i++;
var marker = createMarker(point,html, i, map);
point = new google.maps.LatLng(42.01, -72.01);
name = "Event3";
address = "address 3";
html = "<b>" + name + "</b> <br/>" + address;
i++;
var marker = createMarker(point,html, i, map);
map.setCenter(marker.getPosition());
point = new google.maps.LatLng(42.01, -72.01);
name = "Event4";
address = "address 3";
html = "<b>" + name + "</b> <br/>" + address;
i++;
var marker = createMarker(point,html, i, map);
map.setCenter(marker.getPosition());
}
function createMarker(point, html, i, map) {
var marker = new google.maps.Marker({
map: map,
position: point,
draggable: true
});
var activeIcon, idleIcon;
idleIcon = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
marker.setIcon(idleIcon);
var elem = document.getElementById('a' + i);
if (!!elem) {
elem.onmouseover = function() {
marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_red.png');
}
elem.onmouseleave = function() {
marker.setIcon(idleIcon);
}
}
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
return marker;
}
function hover(marker, i) {
document.getElementById('a' + i).onmouseover = function() {
marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_red.png');
}
document.getElementById('a' + i).onmouseleave = function() {
marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_blue.png');
}
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, "load", initialize);html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js?" type="text/javascript"></script>
<div id="a0">Event 1 address 1</div>
<div id="a1">Event 2 address 2</div>
<div id="a2">Event 3 address 3</div>
<div id="a3">Event 4 address 3</div>
<div id="map_canvas"></div>【问题讨论】：
标签： javascript google-maps google-maps-api-3