Mover el marcador suavemente a lo largo de dos coordenadas GPS


10

Estoy tratando de animar un marcador de una coordenada GPS a otra. Actualmente estoy usando Google Maps para lograr esto y, aunque mi algoritmo parece correcto, Google Maps está haciendo un mal trabajo al convertir la posición GPS al píxel correcto en el mapa, lo que hace que la animación no sea tan fluida cuando el mapa se aleja . Acercado, es muy suave y es por eso que sospecho que el "zig zag" es causado por Google haciendo una conversión de píxeles LatLng-> pobre.

La mejor solución sería tratar directamente con las coordenadas de los marcadores (x, y) píxeles, pero desafortunadamente no existe un método público para asignar la ubicación de píxeles a un marcador.

El código está disponible aquí: http://dev.syskall.com/map/

¿Cómo suavizarías la animación cuando la alejes? Alternativamente, estaría interesado en usar un equivalente a Google Maps que me permitiera lograr lo que estoy tratando de hacer si no es posible con Google Maps.

PD: No estoy seguro de si este es el lugar correcto para hacer mi pregunta, avíseme si no es el caso.

Respuestas:



2

Puede usar la biblioteca de marcadores-animar-discreta para hacer que los marcadores pasen sin problemas de una ubicación a otra.

Podrías inicializar tu marcador así:

var marker = new SlidingMarker({
   //your original marker options
   //...
});

Por lo tanto, su marcador se animará desde la ubicación inicial hasta la dada en esta llamada:

marker.setPosition(givenPosition);

PD: Soy el autor de la biblioteca.


¿Su biblioteca tiene la capacidad de rotar el icono en ángulo? basado en el último lat, lon pasando al siguiente lat lon?
Tim Maxey el

Ver discusión aquí . Se genera un evento para cada paso de animación, donde puede obtener coordenadas e intentar rotar su marcador.
viskin


1

También podría considerar el siguiente enfoque:

  • generar una colección de marcadores entre dos coordenadas por cada ubicación
  • alternar un marcador específico usando la marker.setVisibility(value)función

Ejemplo completo

JSFiddle

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.