Circle fade out over time on Google Map [duplicate]

问题

I am attempting to fade circles out with a setInterval on fillOpacity. However a console log shows the opacity changing but the appearance of the circle does not seem to change. Is there a different set function required to do this?

http://jsfiddle.net/faaxeskg/5/

        setInterval(function() {
         marker.fillOpacity -= .01;
        console.log(marker.fillOpacity);
    }, 200);

code snippet:

var map = null;

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-25.363882, 131.044922)
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  // Add 500 markers to the map at random locations
  var southWest = new google.maps.LatLng(-31.203405, 125.244141);
  var northEast = new google.maps.LatLng(-25.363882, 131.044922);

  var bounds = new google.maps.LatLngBounds(southWest, northEast);
  map.fitBounds(bounds);

  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();


  setInterval(function() {
    var position = new google.maps.LatLng(
      southWest.lat() + latSpan * Math.random(),
      southWest.lng() + lngSpan * Math.random());

    var populationOptions = {
      strokeOpacity: 0,
      fillColor: '#FF0000',
      fillOpacity: 0.65,
      map: map,
      center: position,
      radius: 40000
    };

    var marker = new google.maps.Circle(populationOptions);

    setInterval(function() {
      marker.fillOpacity -= .01;
      console.log(marker.fillOpacity);
    }, 200);

    setTimeout(function() {
      marker.setMap(null);
      delete marker;
    }, 30000);

  }, 2000);
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script>
<div id="map-canvas" style="float:left;width:100%;height:100%;"></div>

回答1:

You need to associate the "opacity change" to the marker, you can do that with function closure (a createCircleMarker function).
Don't use undocumented properties. Use the documented methods.

marker.set("fillOpacity, marker.get("fillOpacity")-0.01);

working code snippet:

var map = null;

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-25.363882, 131.044922)
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  // Add 500 markers to the map at random locations
  var southWest = new google.maps.LatLng(-31.203405, 125.244141);
  var northEast = new google.maps.LatLng(-25.363882, 131.044922);

  var bounds = new google.maps.LatLngBounds(southWest, northEast);
  map.fitBounds(bounds);

  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();


  setInterval(function() {
    var position = new google.maps.LatLng(
      southWest.lat() + latSpan * Math.random(),
      southWest.lng() + lngSpan * Math.random());

    var populationOptions = {
      strokeOpacity: 0,
      fillColor: '#FF0000',
      fillOpacity: 0.65,
      map: map,
      center: position,
      radius: 40000
    };
    createCircleMarker(populationOptions);

  }, 2000);
}

function createCircleMarker(populationOptions) {
    var marker = new google.maps.Circle(populationOptions);

    setInterval(function() {
      marker.set("fillOpacity",marker.get("fillOpacity")-0.05);
      console.log(marker.fillOpacity);
    }, 200);

    setTimeout(function() {
      marker.setMap(null);
      delete marker;
    }, 30000);
}


google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script>
<div id="map-canvas" style="float:left;width:100%;height:100%;"></div>

来源：https://stackoverflow.com/questions/28198415/circle-fade-out-over-time-on-google-map

标签

javascript

google-maps

google-maps-api-3

google-maps-markers