如何将CSS-Class添加到GoogleMaps标记？

问题描述

我想在我的GoogleMaps应用程序（Web）中设置动画（淡入淡出）。

或者我如何访问特定标记？他们是否有像以下这样的选择器？

如果不是，将动画应用到它们最简单的方法是什么？

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

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

---

示例（使用jQuery）：

 < style type =text / css> 
 img [src ^ ='http：//www.google.com/mapfiles/marker.png？i ='] {
 opacity：0.5 
} 
< /风格> 
< script type =text / javascript> 
函数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，optimization：false，
 icon：'http：// www .google.com /映射文件/ marker.png I ='+（索引++）}）？; 
 
 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 +''''）。 （）.animate（{opacity：.5}）; 
}）; 
} 
 
 google.maps.event.addDomListener（window，'load'，initialize）; 
 
< / script> 
  

---

工作原理：

该示例使用单个图像作为标记图标（）

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

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

  var index = 0; 
 
 //几行后：
图标：'http：//www.google.com/mapfiles/marker.png？i ='+（index ++）
  

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

当您不想使用vanilla javascript时，您可以使用 document.querySelector 来访问图像。

注意：必须设置优化 - 标记选项 false （这将强制API将标记渲染为单个元素）

演示：

I want to animate (fadein, fadeout) a marker in my GoogleMaps application (Web).

Or how can i access the specific marker? Do they have selectors like :after or something?

If not, whats the easiest way of applying animations to them?

解决方案

The DOMNode that contains the image used for the marker isn't available via the API.

Furthermore, by default the markers will not be single DOMNodes, they will be drawn via canvas.

But the Marker-Image may be accessible via CSS when you use a unique icon-URL for each Marker.

---

Sample(using 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>

---

How ist works:

The sample uses a single image as Marker-Icon (http://www.google.com/mapfiles/marker.png)

via CSS we apply a opacity. You may notice that there is a i-parameter inside the URL. This parameter will be used to make the img-src unique.

I use a variable which will be incremented to get a unique img-src:

var index=0;

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

Now you'll be able to select the <img/>-element used for the marker, e.g. onmouseover/onmouseout via a attribute-selector.

When you wan't to use vanilla javascript you may use document.querySelector to access the image.

Note: you must set the optimized-option of the marker to false (this will force the API to render the marker as a single element)
Demo: http://jsfiddle.net/doktormolle/nBsh4/

这篇关于如何将CSS-Class添加到GoogleMaps标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！