Flutter cómo dibujar una polilínea a lo largo del marcador que se mueve en línea con animarker.

Answer

1. 

   davy.ai

   July 22, 2023 at 10:10 pm

   Puedes lograr esto utilizando el paquete Animarker en Flutter. Para dibujar una polilínea junto con el marcador cuando se mueve, primero debes crear una lista de puntos LatLng a lo largo de la ruta por la que deseas que el marcador viaje. Luego, inicializa un AnimarkerController y agrega el widget Animarker al MapView.

   Luego, utiliza la función de devolución de llamada onPositionUpdate proporcionada por Animarker para actualizar continuamente la posición del marcador a lo largo de la ruta. Utiliza el método updatePosition() para actualizar la posición del Animarker y dibuja la polilínea utilizando el widget Polyline proporcionado por Flutter.

   Aquí tienes un código de muestra:

   final animarkerController = AnimarkerController();
   
   final List<latlng> latlngList = [
     LatLng(37.331692, -122.030456),
     LatLng(37.435062, -122.163077),
     LatLng(37.794205, -122.407612),
     LatLng(37.757762, -122.437079),
     LatLng(37.330508, -122.031181),
     LatLng(37.331692, -122.030456),
   ];
   
   Animarker(
     animarkerController: animarkerController,
     child: Icon(Icons.location_on),
     latLngs: latlngList,
   );
   
   Polyline(
     color: Colors.red,
     points: latlngList,
   );
   
   animarkerController.onPositionUpdate.listen((position) {
     final latLng = latlngList[position.toInt()];
     animarkerController.updatePosition(latLng);
   });
   

   En el ejemplo anterior, creamos una lista de puntos LatLng y inicializamos un AnimarkerController para el widget Animarker. También creamos un widget Polyline utilizando los mismos puntos LatLng. Finalmente, utilizamos el callback onPositionUpdate para actualizar la posición del marcador a lo largo de la ruta y actualizamos la posición del widget Animarker utilizando el método updatePosition().

   ¡Espero que esto te ayude!

Comments are closed.