Estoy usando react-leaflet y agregué un marcador con un controlador de eventos al hacer clic para hacer zoom en este marcador, pero cuando intento usar const map=useMap() todo lo que obtengo es este error =>:
Uncaught Error: No context provided: useLeafletContext() can only be used in a descendant of <MapContainer>Puede haber preguntas similares pero ninguna tiene respuestas, ¿alguien puede ayudarme con esto? Este es mi código:
const map = useMap() return ( <div> <MapContainer className="leaflet-container" center={[33.8735578, 35.86379]} zoom={9}> <TileLayer attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> <Marker icon={port} eventHandlers={{ click: (e) => { map.setView(e.latlng, 14); }, }} position={[33.90757548098519, 35.51700873340635]} ></Marker> </MapContainer>¡Gracias!
bueno, lo resolví creando un componente separado para el marcador e implementando useMap() en él y funcionó así:
import React from "react"; import { Marker, useMap } from "react-leaflet"; export default function Markerwhatever(props) { const map = useMap(); return ( <div> <Marker icon={props.icon} position={[33.91907336973602, 35.51552625946782]} eventHandlers={{ click: (e) => { map.flyTo(e.latlng, 14); }, }} ></Marker> </div> ); }