¿Cómo añadir un evento onHover al marcador de Google Maps? Flutter Web

Answer

1. 

   davy.ai

   May 29, 2023 at 6:27 am

   Desafortunadamente, actualmente el paquete de Google Maps Flutter Web sólo proporciona los eventos onTap, onDrag y onDragged para el Widget del Marcador. No hay una forma incorporada de añadir una devolución de llamada cuando se pasa el ratón sobre el Marcador, aunque el icono del cursor cambia cuando se pasa el puntero por encima.

   Sin embargo, se puede intentar integrar el paquete flutter_map con leaflet para lograr esta funcionalidad. flutter_map es una implementación de Dart de los mapas Leaflet construidos para ser utilizados en una aplicación Flutter.

   Con flutter_map, se puede añadir un Widget MarkerLayerOptions que tiene una devolución de llamada onMouseMove que se activa cuando se pasa el ratón por encima del Marcador. Entonces, se puede utilizar esta devolución de llamada para ejecutar una lógica personalizada.

   Aquí tiene un ejemplo de implementación:

   import 'package:flutter/material.dart';
   import 'package:flutter_map/flutter_map.dart';
   import 'package:latlong/latlong.dart';
   
   void main() => runApp(MyApp());
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Demo de Mapas Flutter',
         home: MapPage(),
       );
     }
   }
   
   class MapPage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return FlutterMap(
         options: MapOptions(
             center: LatLng(51.5, -0.09), zoom: 13.0, onTap: (_) => {}),
         layers: [
           TileLayerOptions(
             urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
             subdomains: ['a', 'b', 'c'],
           ),
           MarkerLayerOptions(
               markers: [
                 Marker(
                   width: 80.0,
                   height: 80.0,
                   point: LatLng(51.5, -0.09),
                   builder: (ctx) => Container(
                     child: IconButton(
                       icon: Icon(Icons.location_on),
                       onPressed: () {},
                     ),
                   ),
                   onMouseMove: (me, _) => print("Introducido en el Marcador"),
                 ),
               ],
           ),
         ],
       );
     }
   }
   

   En el ejemplo anterior, hemos utilizado MarkerLayerOptions para mostrar el Widget Marcador en el mapa. También hemos añadido una devolución de llamada onMouseMove en el Widget del Marcador que se activa cuando se pasa el ratón por encima del Marcador. Puede reemplazar print("Introducido en el Marcador") con su propia lógica personalizada para ejecutar cuando se pasa el puntero por encima del Marcador.

   Tenga en cuenta que el paquete flutter_map puede tener una curva de aprendizaje fiable para implementar correctamente, pero la documentación y los ejemplos completos del paquete lo hacen más fácil de usar.

Comments are closed.