Cómo agregar animaciones personalizadas en Google Map V3 Marker cuando suelto cada marcador uno por uno?
Este mi ejemplo simple de trabajo de la caída de cada marcador uno por uno en el mapa de Google V3. He fijado la animación de gota cuando el marcador se añade a Google Map.
Pero quiero personalizar el Drop con Fade Animation, ¿será posible usar cualquier material de Javascript u otra biblioteca?
- Técnica para ejecutar varias MapActivities en el mismo proceso
- Android Google Maps v2 - Tecla de depuración vs tecla de liberación
- Android: cómo cargar KML
- MapFragment devuelve null
- Clave de la API de Google Places para Android
Google tiene estas opciones en espacio de nombres ¿Podemos agregar nuestras opciones de animación personalizadas en espacio de nombres?
- Google.maps.Animation.DROP
- Google.maps.Animation.BOUNCE
- Google.maps.Animation.CUSTOM_FADE (¿Es posible?)
Mi código de trabajo para Google map V3
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Google Maps Multiple Markers</title> <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> </head> <body> <div id="map" style="width: 500px; height: 400px;"></div> <script type="text/javascript"> var locations = [ ['Bondi Beach', -33.890542, 151.274856, 4], ['Coogee Beach', -33.923036, 151.259052, 5], ['Cronulla Beach', -34.028249, 151.157507, 3], ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], ['Maroubra Beach', -33.950198, 151.259302, 1] ]; var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: new google.maps.LatLng(-33.92, 151.25), mapTypeId: google.maps.MapTypeId.ROADMAP }); var infowindow = new google.maps.InfoWindow(); var marker, i; function marker(i) { if (i > locations.length) return; var marker; marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), animation: google.maps.Animation.DROP, map: map }); var t=setTimeout("marker("+(i+1)+")",500); } marker(0); </script> </body> </html>
- Prefijo de espacio de nombres inesperado "xmlns" encontrado para fragmento de etiqueta Prefijo de espacio de nombres inesperado "mapa" encontrado para fragmento de etiqueta
- ¿Cómo obtener la ubicación actual en Google Maps Android API v2?
- Google Maps CameraUpdateFactory no se ha inicializado
- ¿Qué API usar para acceder al historial de ubicaciones de una aplicación para Android?
- Google Maps Android, detecta la interacción del usuario en un mapa de la ubicación
- Utilice google map en cualquier dispositivo. (Sin jugar de google)
- Google Maps API Android
- Com.google.android.gms.maps.MapFragment: No se puede resolver el símbolo "maps"
Aquí está lo lejos que he llegado. La API de Google Maps agrega un fragmento de fotograma clave CSS en la página desde el interior de http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/14/4/%7Bcommon,map,util,marker%7D .js
Dentro de la página se ve algo como esto
@-webkit-keyframes _gm2657 { 0 % { -webkit-transform: translate3d(0px, 0px, 0); -webkit-animation-timing-function: ease-out; } 50 % { -webkit-transform: translate3d(0px, -20px, 0); -webkit-animation-timing-function: ease-in ; } 100 % { -webkit-transform: translate3d(0px, 0px, 0); -webkit-animation-timing-function: ease-out; }
}
La función allí se comprime a
function uJ(a, b) { var c = []; c[A]("@-webkit-keyframes ", b, " {\\n"); K(ab, function (a) { c[A](100 * a[$k], "% { "); c[A]("-webkit-transform: translate3d(", a[Fv][0], "px,", a[Fv][1], "px,0); "); c[A]("-webkit-animation-timing-function: ", a.wa, "; "); c[A]("}\\n") }); c[A]("}\\n"); return c[Mc]("") }
No puedo cavar a través de que más en este momento para averiguar cómo hackear en ese objeto.
El problema es que no sé cómo construyen ese nombre de animación de fotogramas clave. He llegado tan lejos como ad="_gm"+l[B](1E4*l[Qb]())
del archivo de arriba, pero buena suerte de seguimiento que uno de nuevo a lo que [B] es o qué objeto 1E4 * l equivale a, o cómo se define Qb.
Mi siguiente ruta sería raspar el HTML para las etiquetas de script que contengan @ -webkit-keyframes _gm y ver acerca de extraer el número utilizado, luego usarlo para escribir su propia animación de fotogramas clave y esperar que google maps use su CSS inyectado en lugar de su propio .
A lo largo de esas líneas escribí un pequeño método jQuery para buscar todas las divs con un atributo de estilo que coincide parcialmente con "_gm".
var poll; var ntrvl = setInterval(function () { poll = $("div[style*=' _gm']"); if (poll.length > 0) { craftNewAnimation(poll.css('-webkit-animation-name')); clearInterval(ntrvl); } }, 10); function craftNewAnimation(name) { console.log(name); var markup = ['<style>', '@-webkit-keyframes ' + name + ' {', '0%{ opacity: 0; }', '100%{ opacity: 1; }', '}', '</style' ]; $('body').append(markup.join("")); }
http://jsbin.com/uJAdaJA/3/edit
No reemplaza al primero que detecta la animación por alguna razón. Y podría haber otras maneras de obtener ese nombre de Keyframe mágico sin tanta piratería.
Buena suerte.
var locations = [ ['Surat', 21.205386, 72.847301, 4], ['Mumbai', 19.068789, 72.870265, 5] ]; var map = new google.maps.Map(document.getElementById('map'), { zoom: 7, center: new google.maps.LatLng(20.120783, 71.8517917), mapTypeId: google.maps.MapTypeId.ROADMAP, }); var infowindow = new google.maps.InfoWindow(); var marker, i; for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map, draggable:true, animation: google.maps.Animation.DROP, animation: google.maps.Animation.BOUNCE, }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); } var bounds = new google.maps.LatLngBounds(); // in the marker-drawing loop: bounds.extend(pos); // after the loop: map.fitBounds(bounds);
Puede utilizar la utilidad de ricos de Google, que le permite utilizar elementos html como marcadores. Ahora puedes darle al elemento una animación css como quieras, por ejemplo, usando Animate.css de daneden .
Un ejemplo:
var pictureLabel = document.createElement("img"); pictureLabel.src = YOUR_SOURCE; pictureLabel.width = SOME_WIDTH; pictureLabel.height = SOME_HEIGHT; // daneden even got the exact animation your'e looking for :) pictureLabel.className = pictureLabel.className + " animated fadeInDown"; var marker = new RichMarker({ position: new google.maps.LatLng(YOUR_LAT, YOUR_LNG), map: YOUR_MAP, content: pictureLabel });
Si utiliza el marcador rico de Google, no se olvide de usar su solución de errores de clic!