Javascript 使用Sprite自定义谷歌地图图标

我发现定制的谷歌地图图标图像可以作为小图片的精灵矩阵进行布局。我实际上想创建自定义图标，每页10个结果的编号为1-10，并且鼠标悬停效果可以改变颜色

我不知道该怎么做。相关代码如下所示：

$('.entries').each(function(index){
    var entry=$(this);

    latlng[index]=new google.maps.LatLng($(this).attr('data-lat'),$(this).attr('data-lng'));

    marker[index]=new google.maps.Marker({
                        position:latlng[index],
                        map:map,
                        icon:image_url
                    });

    if(marker[index]){
        marker[index].setMap(map);
    }   

即使我不能使它成为一个精灵，这似乎不太可能现在我想改变鼠标上方的图标

我试着这么做，并创造了一个类似的作品。这里的问题是地图在重置时偶尔会闪烁。有更好的办法吗

          google.maps.event.addListener(marker[index],'mouseover', function(){
            entry.addClass('map-hover');
        //  alert(marker[index].icon);
            marker[index].icon='{{site}}media/map-icons/iconb'+(index+1)+'.png'
            marker[index].setMap(map);

        });

        google.maps.event.addListener(marker[index],'mouseout', function(){
            entry.removeClass('map-hover');
            marker[index].icon='{{site}}media/map-icons/iconr'+(index+1)+'.png'
            marker[index].setMap(map);      
        });

这段代码可能会帮助您了解如何放置自定义标记

function initialize() {
  var mapDiv = document.getElementById('map-canvas');
  var latLng = new google.maps.LatLng(37.4419, -122.1419);
  var map = new google.maps.Map(mapDiv, {
    center: latLng,
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var image = 'http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png';
  var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
  var beachMarker = new google.maps.Marker({
    position: latLng,
    map: map,
    icon: image
  });
}
​