[英]How to control google map markers' opacity
我需要根据时间使一些标记半透明。 有没有办法控制标记的 CSS 不透明度? 或者是否有可能可靠地找出标记的 DOM 元素?
我使用谷歌地图 API v3。
可以使用marker.setOptions({'opacity': 0.5})
设置标记marker.setOptions({'opacity': 0.5})
您可以使用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>
没有办法通过 CSS。 您可以引用数组中的标记,然后在每个标记对象上使用setIcon()
方法循环遍历数组以引用具有不同不透明度的图标(假设您使用的是具有 alpha 透明度的 PNG)。 您必须调用一个函数来根据用户输入或其他一些事件更改图标。
您可以在创建标记时设置不透明度
marker = new google.maps.Marker({opacity:0.5, ...});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.