javascript 如何控制谷歌地图标记的不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8802546/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to control google map markers' opacity
提问by jsmarkus
I need to make some markers semi-transparent depending on time. Is there any way to control the CSS opacity of a marker? Or is it possible to reliably find out a marker's DOM element?
我需要根据时间使一些标记半透明。有没有办法控制标记的 CSS 不透明度？或者是否有可能可靠地找出标记的 DOM 元素？
I use Google Maps API v3.
我使用谷歌地图 API v3。
采纳答案by andresf
There is no way via CSS. You could reference the markers in an array, and then loop through the array using the setIcon()method on each marker object to reference icons with different opacities (presuming you're using PNGs with alpha transparency). You'll have to call a function to change the icons based on user input or some other event.
没有办法通过 CSS。您可以引用数组中的标记，然后使用setIcon()每个标记对象上的方法循环遍历数组以引用具有不同不透明度的图标（假设您使用的是具有 alpha 透明度的 PNG）。您必须调用一个函数来根据用户输入或其他一些事件更改图标。
回答by Vindolin
The opacity of markers can be set with marker.setOptions({'opacity': 0.5})
标记的不透明度可以设置为 marker.setOptions({'opacity': 0.5})
回答by Evan
You can use marker.setOpacity(0.5);https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker
您可以使用marker.setOpacity(0.5);https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker
code snippet:
代码片段：
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>