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

Posted 2023-02-23

【中文标题】如何将 CSS-Class 添加到 GoogleMaps 标记？

【英文标题】：How to add CSS-Class to a GoogleMaps marker?

【发布时间】：2014-03-29 15:21:24

【问题描述】：

我想为我的 GoogleMaps 应用程序 (Web) 中的标记设置动画（淡入淡出）。

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

或者我怎样才能访问特定的标记？他们有像 :after 之类的选择器吗？

如果没有，对它们应用动画最简单的方法是什么？

【问题讨论】：

the easiest way of applying animations 到标记使用Animation class。不幸的是，它不包括淡入淡出的选项，它只能让你“放下”或反弹它们

【参考方案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> 

---

如何运作：

示例使用单个图像作为 Marker-Icon (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。

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

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

【讨论】：

这很有帮助，非常感谢！是否有任何用于删除标记的 API？我看到许多数据图在它们消失时会淡出它们的标记。我已经设置了几秒钟的计时器，在帽子之后，我想淡出标记，然后“marker.setMap(null)”

不适用于 ../image.png 之类的路径。当我想通过 chrome 中的 javascript 控制台获取标记时，我得到了一个空数组。我通过函数“remove_marker(marker)”传递标记，在 setTimeout 之后，它被删除。但是没有“this”我无法访问标记。

我使用了这种方法的一种变体，而不是使用唯一 id 动态更改每个 url，我为每个标记“类型”使用一个图标，为该类型的“活动”标记使用一个额外图标.单击标记时，我会动态更改其 url 以在文件名末尾附加“Active”，并首先重置文件名中先前具有“Active”的所有标记。 （如果您遵循此方法，请务必使用标记的 .setIcon 方法更改文件路径，而不是 .icon 属性）

从 Google Maps v3 开始，您将无法再访问像这样的自定义图像标记 :(。尝试转到 developers.google.com/maps/documentation/javascript/examples/… 并在控制台中输入 document.querySelectorAll('img[src*=beachflag]')。

@10basetom我为什么要尝试，我知道我的演示有效？再读一遍我的回答，你会发现区别的。

【参考方案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.markerClasscursor:pointer !important

像魅力一样工作

【参考方案3】：

一种简单的方法是，选择标记并为该选择添加一个类。但为此，您必须为每个标记指定一个标题。除了谷歌动画，任何动画都不起作用。

$("div[title=\"" + name+ "\"]").addClass("aClass")

我希望这对某人有所帮助。