自定義谷歌地圖圖標使用雪碧

我發現自定義的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

自定義谷歌地圖圖標使用雪碧

回答

相關問題