Wie füge ich CSS-Klasse zu einem GoogleMaps-Marker hinzu?

Question

Ich möchte einen Marker in meiner GoogleMaps-Anwendung (Web) animieren (verblassen, ausbleichen).

Wie kann ich einem Marker eine CSS-Klasse zuweisen?

Oder wie kann ich auf den spezifischen Marker zugreifen? Haben sie Selektoren wie: nach oder so?

Wenn nicht, was ist der einfachste Weg, um Animationen auf sie anzuwenden?

Answer 1

Der DOMNode, der das für den Marker verwendete Bild enthält, ist über die API nicht verfügbar.

Darüber hinaus sind die Marker standardmäßig keine einzelnen DOMNodes, sie werden über Canvas gezeichnet.

Das Marker-Image ist jedoch möglicherweise über CSS zugänglich, wenn Sie für jeden Marker eine eindeutige Icon-URL verwenden.

---

Probe (mit jQuery):

<style type="text/css"> 
img[src^='http://www.google.com/mapfiles/marker.png?i=']{ 
    opacity: 0.5 
} 
</style> 
<script type="text/javascript"> 
     function initialize() { 
     var index=0; 
     var mapOptions = { 
      zoom: 14, 
      center: new google.maps.LatLng(52.5498783, 13.425209099999961), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById('map_canvas'), 
      mapOptions); 

     marker=new google.maps.Marker({position:map.getCenter(), 
       map:map,optimized:false, 
       icon:'http://www.google.com/mapfiles/marker.png?i='+(index++)}); 

     google.maps.event.addListener(marker,'mouseover',function(){ 
      $('img[src="'+this.icon+'"]').stop().animate({opacity:1}); 
     }); 

     google.maps.event.addListener(marker,'mouseout',function(){ 
      $('img[src="'+this.icon+'"]').stop().animate({opacity:.5}); 
     }); 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 

</script> 

---

Wie ist funktioniert:

Das Beispiel verwendet ein einzelnes Bild als Marker-Icon (http://www.google.com/mapfiles/marker.png)

über CSS wenden wir eine Opazität an. Möglicherweise stellen Sie fest, dass sich in der URL ein i-Parameter befindet. Dieser Parameter wird verwendet, um den img-src eindeutig zu machen.

Ich benutze eine Variable, die erhöht wird, um eine einzigartige img src-zu bekommen:

var index=0; 

//a few lines later: 
icon:'http://www.google.com/mapfiles/marker.png?i='+(index++) 

Jetzt werden Sie in der Lage sein, wählen Sie die <img/> -elementigen für den Marker verwendet werden, z.B. onmouseover/onmouseout über einen Attribut-Selektor.

Wenn Sie Vanille Javascript verwenden möchten, können Sie document.querySelector verwenden, um auf das Bild zuzugreifen.

Hinweis: müssen Sie die optimized -option des Markers false gesetzt (dies wird die API zwingen, die Markierung als ein einzelnes Element zu machen)
Demo:http://jsfiddle.net/doktormolle/nBsh4/

Answer 2

Es gibt einen Trick das kann funktionieren, wenn Sie zum Beispiel möchten Sie den Cursor für den Marker ändern Fügen Sie diese:

google.maps.event.addListener(YOURMARKER,'mouseover',function(){$(".gm-style div").addClass("markerClass")});       
google.maps.event.addListener(YOURMARKER,'mouseout',function(){$(".gm-style div").removeClass("markerClass")});       

und

#YOUR-CANVAS .gm-style div {cursor: default !important;} 
#YOUR-CANVAS .gm-style div.markerClass{cursor:pointer !important} 

funktioniert wie ein Charme