在将Google地图添加到地图后的几秒钟后，如何淡出Google地图中的圈子？ [英] How do I fade out a circle in a Google Map, x seconds after I've added it to the map?

问题描述

我基本想到的是Google在这个例子中所做的事情

每秒我都想在某些坐标处添加圆圈，然后慢慢淡出。我已经设法向地图添加圈子：

  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 $（city 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文档，甚至是示例代码，但也许我错过了一些东西。 解决方案

要淡出它们你需要减少填充和笔画的不透明度，直到0.0。

  setInterval（fadeCityCircles，1000）; 
 
 function fadeCityCircles（）{
（citymap中的var city）{
 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}）; 
} 
} 
  

示例

What I basically had in mind is what Google did in this example

Every second I want to add circles at certain coordinates and then slowly fade them out. I already managed to add circles to the map:

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);
}

But I can't find how to fade them out anywhere. Already tried going through the Google Maps API documentation and even the example's code, but maybe I missed something.

解决方案

To fade them out you need to decrease the opacity of the fill and the stroke until it is 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

这篇关于在将Google地图添加到地图后的几秒钟后，如何淡出Google地图中的圈子？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！