wake-up-neo.com

Wie füge ich eine CSS-Klasse zu einer Google Maps-Markierung hinzu?

Ich möchte eine Markierung in meiner GoogleMaps-Anwendung (Web) animieren (einblenden, ausblenden). 

Wie kann ich einer Markierung eine CSS-Klasse zuweisen?

Oder wie kann ich auf die Markierung zugreifen? Haben sie Selektoren wie: after oder etwas? 

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

17
Bastian Gruber

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

Darüber hinaus sind die Markierungen standardmäßig nicht als einzelne DOMNodes definiert, sondern werden über die Leinwand gezeichnet.

Auf das Marker-Image kann jedoch über CSS zugegriffen werden, wenn Sie für jeden Marker eine eindeutige Symbol-URL verwenden.


Beispiel (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 funktioniert es:

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

via CSS wenden wir eine Deckkraft an. Möglicherweise stellen Sie fest, dass die URL einen i-Parameter enthält. Dieser Parameter wird verwendet, um das img-src eindeutig zu machen.

Ich verwende eine Variable, die inkrementiert wird, um ein eindeutiges img-src zu erhalten:

var index=0;

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

Jetzt können Sie das <img/>- Element auswählen, das für die Markierung verwendet wird, z. onmouseover/onmouseout über einen Attributselektor.

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

Hinweis: Sie müssen die Option optimized- der Markierung auf false setzen (dies zwingt die API, die Markierung als einzelnes Element darzustellen)
Demo:http://jsfiddle.net/doktormolle/nBsh4/

17
Dr.Molle

Es gibt einen Trick, der funktionieren kann, wenn Sie beispielsweise den Cursor für die Markierung ändern möchten Fügen Sie Folgendes hinzu:

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}

klappt wunderbar

0
Hendrik Eppinga