web-dev-qa-db-fra.com

Comment ajouter une classe CSS à un marqueur Google Maps?

Je souhaite animer (fadein, fadeout) un marqueur dans mon application GoogleMaps (Web). 

Comment puis-je affecter une classe CSS à un marqueur?

Ou comment puis-je accéder au marqueur spécifique? Ont-ils des sélecteurs comme: after ou quelque chose? 

Sinon, quel est le moyen le plus simple de leur appliquer des animations?

google-mapsgoogle-maps-api-3google-maps-markers
17
Bastian Gruber

Le DOMNode contenant l'image utilisée pour le marqueur n'est pas disponible via l'API.

De plus, par défaut, les marqueurs ne seront pas des DOMNodes simples, ils seront dessinés via canvas.

Mais l'image de marqueur peut être accessible via CSS lorsque vous utilisez une URL d'icône unique pour chaque marqueur.

Exemple (en utilisant 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>

Comment ça marche:

L'exemple utilise une seule image en tant qu'icône de marqueur ( http://www.google.com/mapfiles/marker.png ).

via CSS nous appliquons une opacité. Vous remarquerez peut-être qu'il existe un paramètre i dans l'URL. Ce paramètre sera utilisé pour rendre img-src unique.

J'utilise une variable qui sera incrémentée pour obtenir un img-src unique:

var index=0;

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

Vous pourrez maintenant sélectionner l'élément <img/>- utilisé pour le marqueur, par exemple. onmouseover/onmouseout via un sélecteur d'attribut.

Lorsque vous ne souhaitez pas utiliser javascript dans Vanilla, vous pouvez utiliser document.querySelector pour accéder à l'image.

Remarque: vous devez définir l'option optimized- du marqueur sur false (ceci forcera l'API à rendre le marqueur sous la forme d'un seul élément)
Démo:http://jsfiddle.net/doktormolle/nBsh4/

17
Dr.Molle

Il y a une astuce qui peut fonctionner si vous voulez par exemple changer le curseur pour le marqueur .__ Ajouter ceci:

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

et 

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

fonctionne comme un charme

0
Hendrik Eppinga