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

【问题标题】：How to control google map markers' opacity如何控制谷歌地图标记的不透明度
【发布时间】：2012-02-06 19:43:12
【问题描述】：

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

我使用 Google Maps API v3。

【问题讨论】：

这和stackoverflow.com/questions/8721327/…非常相似
查看有关 marker.setOpacity 的答案 - 现在是正确的方法！

标签： javascript google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

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

【讨论】：

【解决方案2】：

您可以使用marker.setOpacity(0.5); https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker

代码 sn-p：

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>

【讨论】：

【解决方案3】：

没有办法通过 CSS。您可以引用数组中的标记，然后在每个标记对象上使用 setIcon() 方法循环遍历数组以引用具有不同不透明度的图标（假设您使用的是具有 alpha 透明度的 PNG）。您必须调用一个函数来根据用户输入或其他事件更改图标。

【讨论】：

在代码 sn-p 中添加不透明度的实际更改方式会很棒。

【解决方案4】：

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

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

【讨论】：