我已经查看了这里的所有答案，并且找不到我正在寻找的东西，而且我是一个JS noob，所以请耐心等待。
我已经获得了从XML文件加载和创建标记的地图，并在加载每个标记类别时构建侧边栏列表。该文件具有分类标记，每个类别具有不同的标记颜色。当鼠标悬停在相应的侧边栏项目上时，我可以让标记改变颜色，但我希望它们在我鼠标移开时返回默认颜色。我可以为mouseout设置一个明确的颜色，但由于每个类别都是不同的颜色，所以在mouseout之后它们都会相同。
我非常依赖迈克威廉姆斯的教程，我知道必须有一种方法可以获取默认颜色并将其用于鼠标输出但是我是JS noob所以我还没有想到出来。谢谢你的帮助。
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
//var for kml route layers
var routes = {
y: {
name: "Winter Routes",
url: "http://www.huts.org/Tests/Maps/GPSTracks/Opus_Hut_Approach_Winter.kml"
},
z: {
name: "Summer Routes",
url: "http://www.huts.org/Tests/Maps/GPSTracks/Telluride_to_Last_Dollar.kml"
},
};
var gmarkers = [];
var gicons = [];
var map = null;
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
gicons["ltblue"] = new google.maps.MarkerImage("images/marker_ltblue.png");
var iconImage = new google.maps.MarkerImage('images/marker_ltblue.png');
function getMarkerImage(iconColor) {
if ((typeof(iconColor)=="undefined") || (iconColor==null)) {
iconColor = "ltblue";
}
if (!gicons[iconColor]) {
gicons[iconColor] = new google.maps.MarkerImage("images/marker_"+ iconColor +".png");
}
return gicons[iconColor];
}
function category2color(category) {
var color = "ltblue";
switch(category) {
case "huts": color = "ltblue";
break;
case "yurts": color = "orange";
break;
case "active": color = "red";
break;
default: color = "ltblue";
break;
}
return color;
}
gicons["huts"] = getMarkerImage(category2color("huts"));
gicons["yurts"] = getMarkerImage(category2color("yurts"));
gicons["active"] = getMarkerImage(category2color("active"));
// A function to create the marker and set up the event window
function createMarker(latlng,name,html,category) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
icon: gicons[category],
map: map,
title: name,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
// === Store the category and name info as a marker properties ===
marker.mycategory = category;
marker.myname = name;
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
var testimonial = document.getElementById('hutMapinfo');
testimonial.innerHTML = contentString;
});
}
// == shows all markers of a particular category, and ensures the checkbox is checked ==
function show(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(true);
}
}
// == check the checkbox ==
document.getElementById(category+"box").checked = true;
}
// == hides all markers of a particular category, and ensures the checkbox is cleared ==
function hide(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(false);
}
}
// == clear the checkbox ==
document.getElementById(category+"box").checked = false;
// == close the info window, in case its open on a marker that we just hid
infowindow.close();
}
// == a checkbox has been clicked ==
function boxclick(box,category) {
if (box.checked) {
show(category);
} else {
hide(category);
}
// == rebuild the side bar
makeSidebar();
}
function myclick(i) {
google.maps.event.trigger(gmarkers[i],"click");
}
// == rebuilds the sidebar to match the markers currently displayed ==
function makeSidebar() {
var html = "";
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].getVisible()) {
html += '<a href="javascript:myclick(' + i + ')" onmouseover="gmarkers['+ i +'].setIcon(gicons.active)" onmouseout="gmarkers['+ i +'].setIcon(gicons.' + gmarkers[i].mycategory + ')">' + gmarkers[i].myname + '<\/a><br>';
}
}
document.getElementById("side_bar").innerHTML = html;
}
function initialize() {
var myOptions = {
zoom: 7,
center: new google.maps.LatLng(39.492948, -105.289823),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
createRouteTogglers();
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Read the data
downloadUrl("coloradoYurtsToggleTest.xml", function(doc) {
var xml = xmlParse(doc);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
var name = markers[i].getAttribute("label");
var html = GXml.value(markers[i].getElementsByTagName("infowindow")[0]);
var category = markers[i].getAttribute("category");
// create the marker
var marker = createMarker(point,name,html,category);
}
// == show or hide the categories initially ==
show("huts");
hide("yurts");
// == create the initial sidebar ==
makeSidebar();
});
}
// the important function... routes[id].xxxxx refers back to the top
function toggleRoute(checked, id) {
if (checked) {
var layer = new google.maps.KmlLayer(routes[id].url, {
preserveViewport: true,
suppressInfoWindows: false
});
// store kml as obj
routes[id].obj = layer;
routes[id].obj.setMap(map);
}
else {
routes[id].obj.setMap(null);
delete routes[id].obj;
}
};
// create the Routes controls
function createRouteTogglers() {
var html = "<form><ul>";
for (var prop in routes) {
html += "<li id=\"selector-" + prop + "\"><input type='checkbox' id='" + prop + "'" +
" onclick='highlight(this,\"selector-" + prop + "\"); toggleRoute(this.checked, this.id)' \/>" +
routes[prop].name + "<\/li>";
}
html += "<\/ul><\/form>";
document.getElementById("routeLayers").innerHTML = html;
};
// Append Class on Select
function highlight(box, listitem) {
var selected = 'selected';
var normal = 'normal';
document.getElementById(listitem).className = (box.checked ? selected: normal);
};
答案 0 :(得分：0)
我在发布后自己想出了这个问题的答案，所以我更新了代码，以反映任何人在搜索中找到这个帖子的情况。
这里是在makeSidebar函数中恢复mouseout上默认标记颜色的代码
html += '<a href="javascript:myclick(' + i + ')" onmouseover="gmarkers['+ i +'].setIcon(gicons.active)" onmouseout="gmarkers['+ i +'].setIcon(gicons.' + gmarkers[i].mycategory + ')">' + gmarkers[i].myname + '<\/a><br>';