How to control google map markers' opacity

问题

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.

回答1:

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.

回答2:

The opacity of markers can be set with marker.setOptions({'opacity': 0.5})

回答3:

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>

来源：https://stackoverflow.com/questions/8802546/how-to-control-google-map-markers-opacity