jquery – 在地图的元素外侧鼠标悬停时更改谷歌地图v3标记的颜色

我正在尝试这样做,以便当一个html元素被鼠标悬停在谷歌地图上的标记的颜色代码时,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动态构建标记,如下所示：


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


最佳答案
Example translated from Mike Williams’ v2 tutorial(只需更改侧栏中HTML元素鼠标悬停时的标记图标).
鼠标悬停/鼠标移动时更改标记的代码：

// 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],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 += '

Example using KML/geoxml3

jquery – 在地图的元素外侧鼠标悬停时更改谷歌地图v3标记的颜色

猜你在找的jQuery相关文章