Google 地图上的圆圈随时间淡出

Question

我正在尝试使用 fillOpacity 上的 setInterval 淡出圆圈。然而，控制台日志显示不透明度发生变化，但圆圈的外观似乎没有改变。是否需要不同的设置函数来执行此操作？

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

代码片段：

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>

Answer 1

您需要将“不透明度变化”与标记相关联，您可以使用函数闭包（一个 createCircleMarker 函数）来实现。
不要使用未记录的属性。使用记录的方法。

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

工作代码片段：

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry"></script>
<div id="map-canvas" style="float:left;width:100%;height:100%;"></div>

Google 地图上的圆圈随时间淡出

Circle fade out over time on Google Map

javascript

google-maps

google-maps-api-3

google-maps-markers