在Google Maps API和GeoJSON上圈出“降雨”动画？

Question

I have a google map where I show a group of points represented by circles (not markers) from a GeoJSON file. What I want to do is something similar to a 'rainfall' animation where my map could drop circle by circle and not all at the same time.

I've seen the Google Maps documentation where they accomplish this with setTimeout() and normal markers:

https://developers.google.com/maps/documentation/javascript/examples/marker-animations-iteration

Here is part of my code:

map.data.setStyle(function(feature) {
var mag = 50 * 0.1;                 
return  ({
  icon: {
    path: google.maps.SymbolPath.CIRCLE,
    scale: mag,
    fillColor: feature.getProperty('Colores'),
    fillOpacity: .65,
    strokeWeight: 0
    }
 });
});
}

function eqfeed_callback(results) {
    map.data.addGeoJson(results);
  }

And this is how my GeoJSON looks:

{"id":"Mar0001","properties":{"Latitud":19.0487521384534,"General":"Vehículo","¿Edad de la víctima?":"26 - 35","¿Hora?":"09:00 - 11:00 am","ID":"Mar0001","¿Género de la víctima?":"Hombre","¿Día?":1,"¿Tipo de evento?":"Robo","Longitud":-98.2014441490173}

I hope we can do this with circles as well.

Answer 1

Modified version of the example to:

1. take the data from GeoJSON
2. drop the markers when the button is clicked.

proof of concept fiddle

code snippet:

 var map; var locations = []; var markers = []; function initialize() { map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 3, mapTypeId: google.maps.MapTypeId.ROADMAP }); var featCnt = 0; var bounds = new google.maps.LatLngBounds(); map.data.addListener('addfeature', function(evt) { locations.push(evt.feature); bounds.extend(evt.feature.getGeometry().get()); map.fitBounds(bounds); }); map.data.addGeoJson(geoJson); map.data.setMap(null); } function drop() { clearMarkers(); for (var i = 0; i < locations.length; i++) { addMarkerWithTimeout(locations[i], i * 200); } } function addMarkerWithTimeout(feature, timeout) { window.setTimeout(function() { var mag = 50 * 0.1; markers.push(new google.maps.Marker({ position: feature.getGeometry().get(), map: map, animation: google.maps.Animation.DROP, icon: { path: google.maps.SymbolPath.CIRCLE, scale: mag, fillColor: 'blue', //feature.getProperty('Colores'), fillOpacity: 0.65, strokeWeight: 1 } })); }, timeout); } function clearMarkers() { for (var i = 0; i < markers.length; i++) { markers[i].setMap(null); } markers = []; } google.maps.event.addDomListener(window, "load", initialize); var geoJson = { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "Tipo": "Descarga Contaminante al R\ío", "Fecha": "02 - 06 - 2015", "Hora": "23:36", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_descarga_contaminante.png" }, "geometry": { "type": "Point", "coordinates": [-98.217114751465, 19.038485661435] } }, { "type": "Feature", "properties": { "Tipo": "Otro", "Fecha": "02 - 06 - 2015", "Hora": "23:38", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_descarga_contaminante.png" }, "geometry": { "type": "Point", "coordinates": [-98.21230823291, 19.038485661435] } }, { "type": "Feature", "properties": { "Tipo": "Descarga Contaminante al R\ío", "Fecha": "03 - 06 - 2015", "Hora": "09:54", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_descarga_contaminante.png" }, "geometry": { "type": "Point", "coordinates": [-98.209046666748, 19.041244253071] } }, /* { "type": "Feature", "properties": { "Tipo": "Olor Pestilente en los Cuerpos de Agua", "Fecha": "03 - 06 - 2015", "Hora": "10:55", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_coloracion.png" }, "geometry": { "type": "Point", "coordinates": [0, 0] } }, */ { "type": "Feature", "properties": { "Tipo": "Tala de \Árboles", "Fecha": "03 - 06 - 2015", "Hora": "13:02", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_tala.png" }, "geometry": { "type": "Point", "coordinates": [-98.227328603394, 19.036254414085] } }, { "type": "Feature", "properties": { "Tipo": "Descarga Contaminante al R\ío", "Fecha": "03 - 06 - 2015", "Hora": "20:27", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_descarga_contaminante.png" }, "geometry": { "type": "Point", "coordinates": [-98.198232, 19.043516] } }, { "type": "Feature", "properties": { "Tipo": "Fuga de Agua", "Fecha": "03 - 06 - 2015", "Hora": "20:43", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_fuga.png" }, "geometry": { "type": "Point", "coordinates": [-98.223809545166, 19.029722772246] } }, { "type": "Feature", "properties": { "Tipo": "Fuga de Agua", "Fecha": "03 - 06 - 2015", "Hora": "20:43", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_fuga.png" }, "geometry": { "type": "Point", "coordinates": [-98.223809545166, 19.029722772246] } }, { "type": "Feature", "properties": { "Tipo": "Descarga Contaminante al R\ío", "Fecha": "03 - 06 - 2015", "Hora": "20:43", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_descarga_contaminante.png" }, "geometry": { "type": "Point", "coordinates": [-98.238744084961, 19.043840532738] } }, { "type": "Feature", "properties": { "Tipo": "Descarga Contaminante al R\ío", "Fecha": "03 - 06 - 2015", "Hora": "20:43", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_descarga_contaminante.png" }, "geometry": { "type": "Point", "coordinates": [-98.238744084961, 19.043840532738] } }, { "type": "Feature", "properties": { "Tipo": "Descarga Contaminante al R\ío", "Fecha": "02 - 06 - 2015", "Hora": "12:08", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_descarga_contaminante.png" }, "geometry": { "type": "Point", "coordinates": [-98.227414434082, 19.033455170464] } }, { "type": "Feature", "properties": { "Tipo": "Descarga Contaminante al R\ío", "Fecha": "26 - 05 - 2015", "Hora": "13:15", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_descarga_contaminante.png" }, "geometry": { "type": "Point", "coordinates": [-98.241447751648, 19.057226955132] } }, { "type": "Feature", "properties": { "Tipo": "Basura en Barrancas", "Fecha": "26 - 05 - 2015", "Hora": "15:19", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_basura.png" }, "geometry": { "type": "Point", "coordinates": [-98.222951238281, 19.022582298516] } }, { "type": "Feature", "properties": { "Tipo": "Olor Pestilente en los Cuerpos de Agua", "Fecha": "03 - 06 - 2015", "Hora": "21:22", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_coloracion.png" }, "geometry": { "type": "Point", "coordinates": [-98.13231403125, 18.917387114012] } }, { "type": "Feature", "properties": { "Tipo": "Fuga de Agua", "Fecha": "03 - 06 - 2015", "Hora": "23:56", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_fuga.png" }, "geometry": { "type": "Point", "coordinates": [-98.227156942017, 19.146158341875] } }, { "type": "Feature", "properties": { "Tipo": "Olor Pestilente en los Cuerpos de Agua", "Fecha": "29 - 05 - 2015", "Hora": "23:59", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_coloracion.png" }, "geometry": { "type": "Point", "coordinates": [-98.252476995117, 19.007813527226] } }, { "type": "Feature", "properties": { "Tipo": "Basura en Barrancas", "Fecha": "04 - 06 - 2015", "Hora": "00:03", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_basura.png" }, "geometry": { "type": "Point", "coordinates": [-98.227586095459, 19.022257724238] } }, { "type": "Feature", "properties": { "Tipo": "Coloraci\ón de los Cuerpos de Agua", "Fecha": "03 - 06 - 2015", "Hora": "02:14", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_olor.png" }, "geometry": { "type": "Point", "coordinates": [-98.193082158691, 19.048221662588] } }, { "type": "Feature", "properties": { "Tipo": "Tala de \Árboles", "Fecha": "01 - 06 - 2015", "Hora": "12:07", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_tala.png" }, "geometry": { "type": "Point", "coordinates": [-98.645924871094, 19.322378815858] } }, { "type": "Feature", "properties": { "Tipo": "Fuga de Agua", "Fecha": "03 - 06 - 2015", "Hora": "13:14", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_fuga.png" }, "geometry": { "type": "Point", "coordinates": [-98.203896825439, 19.023393731439] } }, { "type": "Feature", "properties": { "Tipo": "Basura en Barrancas", "Fecha": "04 - 06 - 2015", "Hora": "10:17", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_basura.png" }, "geometry": { "type": "Point", "coordinates": [-98.185529058105, 19.029479352058] } }, { "type": "Feature", "properties": { "Tipo": "Descarga Contaminante al R\ío", "Fecha": "03 - 06 - 2015", "Hora": "16:10", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_descarga_contaminante.png" }, "geometry": { "type": "Point", "coordinates": [-98.215913121826, 18.978109720724] } }, { "type": "Feature", "properties": { "Tipo": "Basura en Barrancas", "Fecha": "04 - 06 - 2015", "Hora": "20:33", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_basura.png" }, "geometry": { "type": "Point", "coordinates": [-98.206986730225, 19.064447061769] } }, { "type": "Feature", "properties": { "Tipo": "Coloraci\ón de los Cuerpos de Agua", "Fecha": "23 - 04 - 2015", "Hora": "15:34", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_olor.png" }, "geometry": { "type": "Point", "coordinates": [-98.229474370605, 19.03962155766] } }, { "type": "Feature", "properties": { "Tipo": "Basura en Barrancas", "Fecha": "05 - 06 - 2015", "Hora": "08:37", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_basura.png" }, "geometry": { "type": "Point", "coordinates": [-98.24187690509, 19.062753609922] } }, { "type": "Feature", "properties": { "Tipo": "Descarga Contaminante al R\ío", "Fecha": "05 - 06 - 2015", "Hora": "08:38", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_descarga_contaminante.png" }, "geometry": { "type": "Point", "coordinates": [-98.254536931641, 19.115222293609] } }, { "type": "Feature", "properties": { "Tipo": "Olor Pestilente en los Cuerpos de Agua", "Fecha": "03 - 04 - 2015", "Hora": "09:33", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_coloracion.png" }, "geometry": { "type": "Point", "coordinates": [-97.924603765137, 18.804813424119] } }, { "type": "Feature", "properties": { "Tipo": "Descarga Contaminante al R\ío", "Fecha": "05 - 06 - 2015", "Hora": "16:26", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_descarga_contaminante.png" }, "geometry": { "type": "Point", "coordinates": [-98.228798453934, 19.021294140614] } }, { "type": "Feature", "properties": { "Tipo": "Olor Pestilente en los Cuerpos de Agua", "Fecha": "22 - 05 - 2015", "Hora": "08:02", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_coloracion.png" }, "geometry": { "type": "Point", "coordinates": [-98.198232, 19.043516] } }, { "type": "Feature", "properties": { "Tipo": "Descarga Contaminante al R\ío", "Fecha": "05 - 06 - 2015", "Hora": "17:06", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_descarga_contaminante.png" }, "geometry": { "type": "Point", "coordinates": [-98.198232, 19.043516] } }, { "type": "Feature", "properties": { "Tipo": "Otro", "Fecha": "29 - 05 - 2015", "Hora": "19:56", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_descarga_contaminante.png" }, "geometry": { "type": "Point", "coordinates": [-98.19708937896, 19.0436681248] } }, { "type": "Feature", "properties": { "Tipo": "Descarga Contaminante al R\ío", "Fecha": "08 - 06 - 2015", "Hora": "20:10", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_descarga_contaminante.png" }, "geometry": { "type": "Point", "coordinates": [-98.198232, 19.043516] } }, { "type": "Feature", "properties": { "Tipo": "Tala de \Árboles", "Fecha": "14 - 06 - 2015", "Hora": "12:00", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_tala.png" }, "geometry": { "type": "Point", "coordinates": [-98.216299359924, 19.06627231984] } }, { "type": "Feature", "properties": { "Tipo": "Descarga Contaminante al R\ío", "Fecha": "11 - 04 - 2015", "Hora": "13:22", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_descarga_contaminante.png" }, "geometry": { "type": "Point", "coordinates": [-98.227757756836, 19.0242051604] } }, { "type": "Feature", "properties": { "Tipo": "Descarga Contaminante al R\ío", "Fecha": "28 - 06 - 2015", "Hora": "15:33", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_descarga_contaminante.png" }, "geometry": { "type": "Point", "coordinates": [-98.198232, 19.043516] } }, { "type": "Feature", "properties": { "Tipo": "Otro", "Fecha": "27 - 06 - 2015", "Hora": "11:00", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_descarga_contaminante.png" }, "geometry": { "type": "Point", "coordinates": [-98.093089406616, 18.91324613216] } }, { "type": "Feature", "properties": { "Tipo": "Otro", "Fecha": "29 - 06 - 2015", "Hora": "08:59", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_descarga_contaminante.png" }, "geometry": { "type": "Point", "coordinates": [-98.198232, 19.043516] } }, { "type": "Feature", "properties": { "Tipo": "Olor Pestilente en los Cuerpos de Agua", "Fecha": "22 - 06 - 2015", "Hora": "16:04", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_coloracion.png" }, "geometry": { "type": "Point", "coordinates": [-98.198232, 19.043516] } }, { "type": "Feature", "properties": { "Tipo": "Descarga Contaminante al R\ío", "Fecha": "09 - 07 - 2015", "Hora": "18:09", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_descarga_contaminante.png" }, "geometry": { "type": "Point", "coordinates": [-98.198232, 19.043516] } }, { "type": "Feature", "properties": { "Tipo": "Descarga Contaminante al R\ío", "Fecha": "10 - 07 - 2015", "Hora": "10:05", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_descarga_contaminante.png" }, "geometry": { "type": "Point", "coordinates": [-98.198232, 19.043516] } }, { "type": "Feature", "properties": { "Tipo": "Olor Pestilente en los Cuerpos de Agua", "Fecha": "10 - 07 - 2015", "Hora": "20:43", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_coloracion.png" }, "geometry": { "type": "Point", "coordinates": [-98.207158391602, 19.012682497882] } }, { "type": "Feature", "properties": { "Tipo": "Basura en Barrancas", "Fecha": "28 - 07 - 2015", "Hora": "11:56", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_basura.png" }, "geometry": { "type": "Point", "coordinates": [-98.248700444824, 18.957167788557] } }, { "type": "Feature", "properties": { "Tipo": "Descarga Contaminante al R\ío", "Fecha": "28 - 07 - 2015", "Hora": "17:17", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_descarga_contaminante.png" }, "geometry": { "type": "Point", "coordinates": [-98.22192127002, 19.024367445717] } }, { "type": "Feature", "properties": { "Tipo": "Otro", "Fecha": "01 - 08 - 2015", "Hora": "17:28", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_descarga_contaminante.png" }, "geometry": { "type": "Point", "coordinates": [-98.198232, 19.043516] } }, { "type": "Feature", "properties": { "Tipo": "Coloraci\ón de los Cuerpos de Agua", "Fecha": "10 - 08 - 2015", "Hora": "12:27", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_olor.png" }, "geometry": { "type": "Point", "coordinates": [-98.233250920898, 19.038485661435] } }, { "type": "Feature", "properties": { "Tipo": "Descarga Contaminante al R\ío", "Fecha": "09 - 08 - 2015", "Hora": "10:00", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_descarga_contaminante.png" }, "geometry": { "type": "Point", "coordinates": [-98.198232, 19.043516] } }, { "type": "Feature", "properties": { "Tipo": "Basura en Barrancas", "Fecha": "19 - 08 - 2015", "Hora": "12:07", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_basura.png" }, "geometry": { "type": "Point", "coordinates": [-98.153085057861, 19.065745025128] } }, { "type": "Feature", "properties": { "Tipo": "Olor Pestilente en los Cuerpos de Agua", "Fecha": "25 - 08 - 2015", "Hora": "22:17", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_coloracion.png" }, "geometry": { "type": "Point", "coordinates": [-98.263806645996, 18.988823180013] } }, { "type": "Feature", "properties": { "Tipo": "Olor Pestilente en los Cuerpos de Agua", "Fecha": "07 - 09 - 2015", "Hora": "11:24", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_coloracion.png" }, "geometry": { "type": "Point", "coordinates": [-98.129567449219, 18.907156266682] } }, { "type": "Feature", "properties": { "Tipo": "Olor Pestilente en los Cuerpos de Agua", "Fecha": "08 - 09 - 2015", "Hora": "15:19", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_coloracion.png" }, "geometry": { "type": "Point", "coordinates": [-98.212394063599, 19.047106108092] } }, { "type": "Feature", "properties": { "Tipo": "Basura en Barrancas", "Fecha": "11 - 09 - 2015", "Hora": "13:00", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_basura.png" }, "geometry": { "type": "Point", "coordinates": [-98.198232, 19.043516] } }, { "type": "Feature", "properties": { "Tipo": "Descarga Contaminante al R\ío", "Fecha": "08 - 06 - 2015", "Hora": "11:40", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_descarga_contaminante.png" }, "geometry": { "type": "Point", "coordinates": [-98.240074460632, 19.080143624303] } }, { "type": "Feature", "properties": { "Tipo": "Descarga Contaminante al R\ío", "Fecha": "28 - 10 - 2015", "Hora": "10:27", "IconLink": "http:\\/\\/dalelacara.cuadriga.com.mx\\/public\\/home\\/img\\/actua\\/marker_descarga_contaminante.png" }, "geometry": { "type": "Point", "coordinates": [-98.198232, 19.043516] } } ] } 

 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } #floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: 'Roboto', 'sans-serif'; line-height: 30px; padding-left: 10px; } #floating-panel { margin-left: -52px; } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="floating-panel"> <button id="drop" onclick="drop()">Drop Markers</button> </div> <div id="map_canvas"></div>