在地图元素外侧鼠标hover时更改谷歌地图v3标记的颜色

我正试图这样做，以便当一个html元素被鼠标hover在谷歌地图上的标记的颜色代码时，api v3将会改变。

这是谷歌地图代码：

$(document).ready(function(){ var markers; var map; var infowindow = new google.maps.InfoWindow(); var bounds = new google.maps.LatLngBounds(); markers = new Array(); var mapOptions = { zoom: 0, //Set to 0 because we are using auto formatting w/ bounds disableDefaultUI: true, zoomControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP, }; map = new google.maps.Map(document.getElementById("map"), mapOptions); map.fitBounds(bounds); $("#map_list ul li").each(function(index) { var markerLatLng = new google.maps.LatLng($(this).children(".marker_lat").text(), $(this).children(".marker_long").text()); var marker = new google.maps.Marker({ position: markerLatLng, map: map, animation: google.maps.Animation.DROP, title : $(this).children(".marker_title").text(), brief: $(this).children(".marker_brief").text(), icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+$(this).children(".marker_number").text()+'|00aeef|000000' }); markers.push(marker); //add to bounds for auto center and zoom bounds.extend(markerLatLng); }); }); 

它是从网页中的html动态构建标记，如下所示：

 
 
 
 
1
 
The Wedding Center
 
45.361885
 
-122.599007
 
 
 
2
 
The Reception Place
 
45.417870
 
-122.658531
 
 
  

我怎样才能这样做，当我将鼠标hover在#map_list ul li上时，它会将颜色代码00aeef更改为ff0000？

Answer 1

从Mike Williams的v2教程翻译的示例 （只需更改侧栏中HTML元素鼠标hover时的标记图标）。

在mouseover / mouseout上更改标记的代码：

 // A function to create the marker and set up the event window function function createMarker(latlng,name,html,color) { var contentString = html; var marker = new google.maps.Marker({ position: latlng, icon: gicons[color], map: map, title: name, zIndex: Math.round(latlng.lat()*-100000)<<5 }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(contentString); infowindow.open(map,marker); }); // Switch icon on marker mouseover and mouseout google.maps.event.addListener(marker, "mouseover", function() { marker.setIcon(gicons["yellow"]); }); google.maps.event.addListener(marker, "mouseout", function() { marker.setIcon(gicons["blue"]); }); gmarkers.push(marker); // add a line to the side_bar html var marker_num = gmarkers.length-1; side_bar_html += '' + name + '<\/a>
'; } 

使用KML / geoxml3的示例

Answer 2

你可以尝试这个（由于某些未知的原因，我不能在我的答案中添加一个例子，但我在下面的评论中添加了一个演示。）

 $(document).ready(function(){ var map, infowindow = new google.maps.InfoWindow(), bounds = new google.maps.LatLngBounds(), markers=[], alternateMarkers=[], markersIcon=[]; var mapOptions = { zoom: 0, //Set to 0 because we are using auto formatting w/ bounds disableDefaultUI: true, zoomControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP, }; map = new google.maps.Map(document.getElementById("map"), mapOptions); map.fitBounds(bounds); $("#map_list ul li").each(function(index) { var mTxt=$(this).children(".marker_number").text(); var markerLatLng = new google.maps.LatLng($(this).children(".marker_lat").text(), $(this).children(".marker_long").text()); var markImg=new google.maps.MarkerImage('http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+mTxt+'|00aeef|000000'); var altMarkImg=new google.maps.MarkerImage('http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+mTxt+'|ff0000'); var marker = new google.maps.Marker({ position: markerLatLng, map: map, animation: google.maps.Animation.DROP, title : $(this).children(".marker_title").text(), brief: $(this).children(".marker_brief").text(), icon: markImg }); markers.push(marker); markersIcon.push(markImg); alternateMarkers.push(altMarkImg); //add to bounds for auto center and zoom bounds.extend(markerLatLng); }); $("#map_list ul li").on('mouseenter', function(){ var id=$(this).attr('id'); markers[id].setIcon(alternateMarkers[id]); }).on('mouseleave', function(){ var id=$(this).attr('id'); markers[id].setIcon(markersIcon[id]); }); });​