Cách kiểm soát độ mờ đục của điểm đánh dấu trên bản đồ google

Question

Tôi cần tạo một số điểm đánh dấu trong suốt tùy thuộc vào thời gian. Có cách nào để kiểm soát độ mờ CSS của một điểm đánh dấu không? Hoặc có thể tìm ra yếu tố DOM của một người đánh dấu đáng tin cậy không?

Tôi sử dụng API Google Maps v3.

Answer 1

Không có cách nào thông qua CSS. Bạn có thể tham khảo các điểm đánh dấu trong một mảng, và sau đó lặp qua mảng bằng cách sử dụng phương thức setIcon() trên mỗi đối tượng điểm đánh dấu với các biểu tượng tham chiếu với các độ mờ khác nhau (giả sử bạn đang sử dụng PNG với độ trong suốt alpha). Bạn sẽ phải gọi một hàm để thay đổi các biểu tượng dựa trên đầu vào của người dùng hoặc một số sự kiện khác.

Answer 2

Các opacity các mốc có thể được thiết lập với marker.setOptions({'opacity': 0.5})

Answer 3

Bạn có thể sử dụng marker.setOpacity(0.5); https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker

đoạn mã:

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>