谷歌地图在鼠标悬停时恢复默认标记

Question

我已经浏览了这里的所有答案，但没有找到我正在寻找的确切内容，我是一个 JS 菜鸟，所以请多多包涵。

我有一个地图，它可以从 XML 文件加载和创建标记，并在加载每个标记类别时构建一个侧边栏列表。该文件对标记进行了分类，每个类别都有不同的标记颜色。当我将鼠标悬停在相应的侧边栏项目上时，我可以让标记更改颜色，但我希望它们在鼠标悬停时返回默认颜色。我可以为 mouseout 设置一个明确的颜色，但由于每个类别都是不同的颜色，所以在 mouseout 之后它们最终都是相同的。

我非常依赖 Mike Williams 的教程，我知道必须有一种方法来获取默认颜色并将其用于鼠标移出，但我是一个 JS 菜鸟，所以我还没有完全弄清楚。感谢您的帮助。

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