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

Question

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

我使用Google Maps API v3。

Answer 1

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

Answer 2

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

Answer 3

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

代码片段：

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>