圆圈在Google地图上随着时间的推移逐渐消失

随着

关注

发信

关注(28)粉丝(399)

圆圈在Google地图上随着时间的推移逐渐消失

本文介绍了圆圈在Google地图上随着时间的推移逐渐消失的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

解决方案

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

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

marker.set（fillOpacity，marker.get（fillOpacity） - 0.01）;

工作程式码片段：

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>

解决方案

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>

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

09-12 23:52