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

Question

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?

I use Google Maps API v3.

Answer 1

可以使用marker.setOptions({'opacity': 0.5})设置标记marker.setOptions({'opacity': 0.5})

Answer 2

You can use 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>

Answer 3

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.

Answer 4

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

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