我正在创建一张地图，鼠标悬停时，悬停的图标会改变风格，工作正常，问题是当第二个标记悬停时，我需要第一个标记到＆＃39回去＆＃39;原来的风格，但无法找到方法。 这是目前正在运行的代码，我将非常感谢我应该尝试在哪里面对这一点。 感谢
var infoWindow = new google.maps.InfoWindow();
var markerGroups = {
"Wavelength": [],
"Wavelength_100G": [],
"Ethernet": [],
"IP_Transit": [],
"Video": [],
"CDN": []
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(38.639104, -8.210413),
zoom: 3
});
//var infoWindow = new google.maps.InfoWindow();
map.set('styles', [{zoomControl: false},
{"elementType": "labels", "stylers": [{"visibility": "off"}]},
{"featureType": "administrative", "stylers": [{"visibility": "off"}]},
{"featureType": "landscape", "stylers": [{"color": "#0b223a"}]},
{"featureType": "poi", "stylers": [{"visibility": "off"}]},
{"featureType": "road", "stylers": [{"visibility": "off"}]},
{"featureType": "transit", "stylers": [{"visibility": "off"}]},
{"featureType": "water", "stylers": [{"color": "#0b5ca2"}]}
]);
downloadUrl("../markers/points.php", function (data) {
//console.log(data);
//var xml = xmlParse(data.response);
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
//alert(markers[i].getAttribute("name"));
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
// var icon = customIcons[type] || {};
var marker = createMarker(point, name, address, type, map);
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function createMarker(point, name, address, type, map) {
var marker = new google.maps.Marker({
map: map,
position: point,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 3,
strokeWeight: 1.5,
strokeColor: "#01B04C",
fillColor: "#0b223a",
fillOpacity: 1.0
},
// shadow: icon.shadow,
type: type,
});
if (!markerGroups[type])
markerGroups[type] = [];
markerGroups[type].push(marker);
var html = "<b>" + name + "</b> <br/>" + address;
bindInfoWindow(marker, map, infoWindow, html);
return marker;
}
function toggleGroup(type) {
for (var i = 0; i < markerGroups[type].length; i++) {
var marker = markerGroups[type][i];
if (!marker.getVisible()) {
marker.setVisible(true);
} else {
marker.setVisible(false);
}
}
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'mouseover', function (markerGroups) {
}
this.setIcon({
path: google.maps.SymbolPath.CIRCLE,
scale: 3,
strokeWeight: 1.5,
strokeColor: "#01B04C",
fillColor: "#F26522",
fillOpacity: 1.0
});
$("#res").html(html);
}
);
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function () {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
google.maps.event.addDomListener(window, 'load', load);
function xmlParse(str) {
if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
}
if (typeof DOMParser != 'undefined') {
return (new DOMParser()).parseFromString(str, 'text/xml');
}
return createElement('div', null);
}
答案 0 :(得分：0)
我建议你有一个名为lastHover的变量，然后在完成mouseover调用后的setIcon事件中，将lastHover设置为当前的悬停标记。然后还添加if语句以执行if lastHover marker is set then unset its hovered icon之类的检查。
示例：
var infoWindow = new google.maps.InfoWindow();
var lastHovered = null;
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'mouseover', function (markerGroups) {
if (lastHovered) {
// Set back the original icon
...
}
// Set current marker with the hover icon
...
// Set current as lastHovered - so we can unset it when a mouseover on a new marker occurs
lastHovered = marker;
}
});
}