Estoy creando una aplicación con JavaScript, React & Leaflet (+ complemento React-Leaflet). Quiero obtener las coordenadas del marcador más cercano a mi ubicación, pero tengo problemas para descubrir cómo usar el complemento GeometryUtil con React-Leaflet.
He probado este código, pero devuelve un mensaje de error.
const Map = ({ markers, center, zoom }) => { /* My location. (Dummy data). */ const myLocation = [-40.5512, 69.9454]; /* Saving map instance to state: */ const [map, setMap] = useState(null); */ Using GeometryUtil. Error occurs here. */ let closest_latlng = L.GeometryUtil.closest(map, markers, myLocation); console.log(closest_latlng); return ( <MapContainer className="map" center={center} zoom={zoom} scrollWheelZoom={false} whenCreated={(map) => setMap(map)} > <TileLayer attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> {markers && ( <> {markers.map((marker, idx) => ( <AllMarkers key={idx} marker={marker} /> ))} </> )} </MapContainer> ); }; export default Map;Mensaje de error: Rechazo no controlado (TypeError): No se pueden leer las propiedades de undefined (leyendo 'más cercano').
El problema está en la forma en que está importando el paquete geometricutil. Prueba así:
import 'leaflet-geometryutil';Y luego debería tener L.GeometryUtil disponible en cualquier lugar donde L esté disponible. Asegúrese de que esta importación ocurra en algún archivo de nivel raíz, como index.js o app.js, de modo que cuando llame a las funciones de L.GeometryUtil, ya se haya importado.
Alternativamente, en el archivo en el que desea usarlo,
import GeometryUtil from "leaflet-geometryutil"; // or import * as GeometryUtil from "leaflet-geometryutil"; let closest_latlng = GeometryUtil.closest(map, markers, myLocation); // no L.GeometryUtil