如何控制谷歌地图标记的透明度

Question

我需要根据时间将一些标记半透明化。有没有办法控制标记的CSS透明度？或者是否可以可靠地找到标记的DOM元素？

我使用Google Maps API v3。

- jsmarkus

---

这与https://dev59.com/yl7Va4cB1Zd3GeqPN-Pb#8722970非常相似。 - bamnet

请参考关于marker.setOpacity的答案 - 这是现在正确的方法！ - whiteatom

Answer 1

标记的不透明度可以使用marker.setOptions({'opacity': 0.5})进行设置。

- Vindolin

Answer 2

你可以使用 marker.setOpacity(0.5);。详情请参见此处。 代码片段：

var marker;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      zoom: 10,
      center: {
        lat: -33.9,
        lng: 151.2
      },
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  marker = new google.maps.Marker({
    position: {
      lat: -33.890542,
      lng: 151.274856
    },
    map: map,
    title: "Bondi Beach"
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="inc" type="text" value="0.5" />
<input type="button" id="set" value="set opacity" onclick="marker.setOpacity(parseFloat(document.getElementById('inc').value))" />
<input type="button" id="full" value="full opacity" onclick="marker.setOpacity(1.0);" />
<div id="map_canvas"></div>

- Evan

Answer 3

在CSS中无法实现。您可以通过引用数组中的标记，并使用 setIcon() 方法循环遍历数组，以引用具有不同不透明度的图标（假设您正在使用具有Alpha透明度的PNG）。您将不得不调用一个函数来根据用户输入或其他事件更改图标。

- andresf

---

在代码片段中添加透明度实际上是如何改变的方式会很棒。 - lukas_o

Answer 4

在创建标记时，您可以设置不透明度。

  marker = new google.maps.Marker({opacity:0.5, ...});

- Eric