圆圈在Google地图上随着时间的推移逐渐消失 [英] Circle fade out over time on Google Map

问题描述

我试图用fillOpacity上的setInterval淡出圈子。然而，控制台日志显示不透明度的变化，但圆圈的外观似乎没有改变。是否有不同的设置功能需要这样做？

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

  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）; //在随机位置添加500个标记到地图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（边界）; 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; < script src =https：//




解决方案

1. 您需要将不透明度更改关联到标记，您可以使用函数闭包（createCircleMarker函数）来完成此操作。 $ b

2. 不要使用未记录的属性。使用记录的方法。
   
   

   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）; //在随机位置向地图添加500个标记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; < script src =https：//

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).

2. 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>

这篇关于圆圈在Google地图上随着时间的推移逐渐消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！