Question

我想在GoogleMaps应用程序（Web）中为标记设置动画（fadein，fadeout）。

如何将任何css类分配给标记？

或者我如何访问特定标记？他们有选择器，如：之后还是什么？

如果没有，最简单的方法是向他们应用动画吗？

Answer 1

包含用于标记的图像的DOMNode无法通过API获得。

此外，默认情况下，标记不是单个DOMNode，它们将通过画布绘制。

但是，当您为每个标记使用唯一的图标URL时，可以通过CSS访问标记图像。

示例（使用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>

工作原理：

该示例使用单个图像作为标记图标（http://www.google.com/mapfiles/marker.png）

通过CSS我们应用了不透明度。您可能会注意到URL中有一个i参数。此参数将用于使img-src唯一。

我使用一个变量来增加一个唯一的img-src：

var index=0;

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

现在，您可以选择用于标记的<img/> - 元素，例如onmouseover / onmouseout通过属性选择器。

如果您不想使用vanilla javascript，可以使用document.querySelector访问该图片。

注意：您必须将标记的optimized - 选项设置为false（这将强制API将标记呈现为单个元素）
演示： http://jsfiddle.net/doktormolle/nBsh4/

Answer 2

如果您想要更改标记的光标，可以使用一个技巧加上这个：

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

和

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

就像一个魅力

Answer 3

一种简单的方法是，选择标记并为该选择添加一个类，但是为此必须为每个标记命名。除了Google动画之外，任何动画都无法使用。

$（“ div [title = \”“ +名称+” \“]”）。addClass（“ aClass”）

我希望这对某人有帮助。

如何将CSS-Class添加到Google地图标记？

3 个答案: