Tengo un proyecto que usa React, react-leaflet y Framework 7. En un componente tengo un Fab-Button de Framework 7 y un Map de react-leaflet. Mi componente Map.jsx se ve así:
import React, { useState } from "react"; import { MapContainer, TileLayer, useMapEvents, Marker, Popup } from "react-leaflet"; import "../css/leaflet.css"; import "../css/app.css"; import {Fab, Icon, PageContent} from "framework7-react"; export default function Map(){ function LocationMarker() { const [position, setPosition] = useState(null) const map = useMapEvents({ click() { map.locate() }, locationfound(e) { setPosition(e.latlng) map.flyTo(e.latlng, map.getZoom()) }, locationerror(e) { alert("Unfortunately, we could not find your location") } }) return position === null ? null : ( <Marker position={position}> <Popup>You are here</Popup> </Marker> ) } function fabGoToCurrentPosition() { //probably something like this: map.locate() } return ( <> <Fab position="right-bottom" slot="fixed" id="fab-button" onClick={() => { fabGoToCurrentPosition() }}> <Icon f7="placemark_fill" ios="f7:placemark_fill" aurora="f7:placemark_fill"></Icon> </Fab> <PageContent className='page-content-map'> <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={true} id="map"> <TileLayer attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> <LocationMarker/> </MapContainer> </PageContent> </> ); }La función "LocationMarker" es de un tutorial de un folleto de reacción y establece la posición del Mapa en la ubicación actual del usuario si se hace clic en el Mapa. Mi objetivo es que la posición se establezca si el usuario hace clic en el Fab-Button en lugar del Mapa.