Estoy desarrollando una aplicación React en mi máquina virtual Ubuntu 20.4 en un navegador Chrome versión 100.0.4896.127 (compilación oficial) (64 bits).
He creado la siguiente aplicación:
https://codesandbox.io/s/react-leaflet-map-with-marker-forked-vtq00e?file=/Map.js
Estoy tratando de establecer un marcador al hacer clic en el mapa usando lo siguiente:
En mi Map.js configuré el evento de clic:
return ( <div id="map" style={style}> <MapContainer // center={[40.0151, -105.2921]} center={[40.7579747, -73.9877313]} // @ts-ignore onClick={addMarker} zoom={15} style={{ height: "90%" }} // @ts-ignore onZoomEnd={console.log} >La siguiente función debería establecer el marcador:
function addMarker(e) { console.log("marker \n"); const { markers } = this.state; markers.pop(); markers.push(e.latlng); this.setState({ markers }); }Sin embargo, cuando hago clic en el mapa, no sucede nada. Tampoco obtengo una salida de consola.
¿Alguna sugerencia de lo que estoy haciendo mal?
¡Agradezco sus respuestas!
Hay una razón por la que TypeScript le dice que los accesorios onClick y onZoomEnd no están disponibles en el componente <MapContainer> de React Leaflet: este último se introdujo en React Leaflet versión 3, y los eventos de mapa ahora deben usarse a través del gancho useMapEvents , como ya lo ha hecho. lo ha intentado en algunos de sus intentos como se puede ver en su CodeSandbox.
Lo que puede no ser obvio con el useMapEvents es que debe usarse en un componente personalizado que será un hijo (descendiente) de su MapContainer. Ver, por ejemplo , tratando de aplicar el zoom al hacer clic con el folleto de reacción
Además, this.setState es típico de los componentes React basados en clases , mientras que en su CodeSandbox usa componentes funcionales. Tenga en cuenta que los ganchos solo se pueden usar en componentes funcionales de React.