自定义谷歌地图图标使用雪碧

我发现自定义的Google地图图标图像可以作为精灵（小图片矩阵）布局。我实际上想要创建编号为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);  
     });

来源

2011-06-01 Ben

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

此代码可以帮助您获得有关将自定义标记的想法。

来源

2011-06-01 02:31:43

自定义谷歌地图图标使用雪碧

回答

相关问题