谷歌地图恢复鼠标输出时的默认标记

Google Maps restore default marker on mouseout

本文关键字:默认 恢复鼠标 输出 谷歌地图      更新时间:2023-09-26

我已经浏览了这里的所有答案,但还没有找到我想要的东西,我是一个JS noob,所以请耐心等待。

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

我非常依赖Mike Williams的教程,我知道一定有办法获取默认颜色并将其用于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);
};

我在发布后自己找到了这个问题的答案,所以我更新了代码以反映这一点,以防有人在搜索中找到这篇文章。

这是在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>';