使用精灵自定义谷歌地图图标

Question

我发现了自定义的谷歌地图图标图像，可以作为精灵（小图片矩阵）进行布局。我实际上想创建自定义图标，编号为1-10（每页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);      
        });

Answer 1

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
  });
}
​

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