如何在将 Google 地图中的圆圈添加到地图 x 秒后淡出它？答案

【问题标题】：How do I fade out a circle in a Google Map, x seconds after I've added it to the map?如何在将 Google 地图中的圆圈添加到地图 x 秒后淡出它？
【发布时间】：2012-12-27 09:47:27
【问题描述】：

我基本上想到的是 Google 在 this 示例中所做的事情

每一秒我都想在特定坐标处添加圆圈，然后慢慢将它们淡出。我已经设法在地图上添加了圆圈：

var citymap = {};
citymap['chicago'] = {
  center: new google.maps.LatLng(41.878113, -87.629798),
  population: 100
};
citymap['amsterdam'] = {
  center: new google.maps.LatLng(52.878113, 5.629798),
  population: 40
};
citymap['paris'] = {
  center: new google.maps.LatLng(48.9021449, 2.4699208),
  population: 100
};
citymap['moscow'] = {
  center: new google.maps.LatLng(56.021369, 37.9650909),
  population: 100
};
citymap['newyork'] = {
  center: new google.maps.LatLng(40.9152414, -73.70027209999999),
  population: 80
};
citymap['losangeles'] = {
  center: new google.maps.LatLng(34.3373061, -118.1552891),
  population: 65
}

for (var city in citymap) {
    var populationOptions = {
        strokeColor: "#900057",
        strokeOpacity: 1,
        strokeWeight: 1,
        fillColor: "#900057",
        fillOpacity: 0.35,
        map: map,
        clickable: false,
        center: citymap[city].center,
        radius: citymap[city].population * 2000
    };
    cityCircle = new google.maps.Circle(populationOptions);
}

但我找不到如何在任何地方淡出它们。已经尝试过浏览 Google Maps API 文档甚至示例代码，但也许我错过了一些东西。

【问题讨论】：

标签： google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

要将它们淡出，您需要降低填充和描边的不透明度，直到达到 0.0。

setInterval(fadeCityCircles,1000);

function fadeCityCircles() {
  for (var city in citymap) {
    var fillOpacity = citymap[city].cityCircle.get("fillOpacity");
    fillOpacity -= 0.02;
    if (fillOpacity < 0) fillOpacity =0.0;
    var strokeOpacity = citymap[city].cityCircle.get("strokeOpacity");
    strokeOpacity -= 0.05;
    if (strokeOpacity < 0) strokeOpacity =0.0;
    citymap[city].cityCircle.setOptions({fillOpacity:fillOpacity, strokeOpacity:strokeOpacity});
  }
}

example

【讨论】：