谷歌地图在鼠标移除时恢复默认标记

Question

我已经浏览了所有在这里的答案，还没有找到我正在寻找什么，我是一个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); 
}; 

Answer 1

我张贴，所以我更新的代码，以反映的情况下，任何人发现在搜索这个帖子后，想出这个问题的答案我自己。

这里，在makeSidebar功能

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>';