5

मुझे समय के आधार पर कुछ मार्कर अर्ध-पारदर्शी बनाने की आवश्यकता है। क्या मार्कर की सीएसएस अस्पष्टता को नियंत्रित करने का कोई तरीका है? या क्या मार्कर के डीओएम तत्व को विश्वसनीय रूप से खोजना संभव है?Google मानचित्र मार्करों की अस्पष्टता को नियंत्रित करने के लिए

मैं Google मानचित्र API v3 का उपयोग करता हूं।

+0

यह बहुत समान है http://stackoverflow.com/questions/8721327/effects-and-animations-with-google-maps-markers/8722970#8722970 पर – bamnet

उत्तर

5

सीएसएस के माध्यम से कोई रास्ता नहीं है। आप एक सरणी में मार्करों का संदर्भ दे सकते हैं, और फिर अलग-अलग अस्पष्टताओं वाले आइकन को संदर्भित करने के लिए प्रत्येक मार्कर ऑब्जेक्ट पर setIcon() विधि का उपयोग कर सरणी के माध्यम से लूप कर सकते हैं (मान लें कि आप अल्फा पारदर्शिता के साथ पीएनजी का उपयोग कर रहे हैं)। आपको उपयोगकर्ता इनपुट या किसी अन्य ईवेंट के आधार पर आइकन बदलने के लिए एक फ़ंक्शन कॉल करना होगा।

21

मार्कर की अस्पष्टता marker.setOptions({'opacity': 0.5})

7

साथ सेट किया जा सकता है आप 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>