Javascript 如何在 React Leaflet map 上添加按钮以创建标记

我有一个表格，其中用户必须指定他的家在 map 上的位置.在这张表格里，我用了React Leaflet张 map .

<Marker>的默认位置为用户的当前位置.我想有一个按钮，每当用户点击它，标记变得可拖动，并可以放置在任何地方的用户设置它.我还在<Popup>中添加了一个提交按钮，当用户点击它时，标记必须是不可拖动的，并且必须更新和保存标记位置才能发送到后端.

以下是我的代码:

const SetViewToCurrentLocation = ({location, setLocation}) => {
    const map = useMap();

    function getGeo() {
        navigator.geolocation.getCurrentPosition( 
            (position) =>  {
                setLocation({
                    lat: position.coords.latitude,
                    lng: position.coords.longitude,
                });
            }, 
            (error) => {
                console.log("--------- ERROR WHILE FETCHING LOCATION ----------- ", error);
            },
            { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000}
            ) ;
    }

    useEffect(() => {
        getGeo();
    }, []);

    useEffect(() => {
        if (location.lat && location.lng) {
            map.setView([location.lat, location.lng]);
        }
    }, [location]);

    return null;
};

const CustomizeMarker = ({location, setLocation}) => {
    const [draggable, setDraggable] = useState(false);
    console.log("*************** THE INPUT LOCATION IS ***************** ", location);
    let lat = location.lat;
    let lng = location.lng;
    const [position, setPosition] = useState({lat, lng});
    console.log("-----------------THE POS VALUE IS ------------------- ", position);
    const markerRef = useRef(null);

    const eventHandlers = useMemo(
        () => ({
            dragend() {
            const marker = markerRef.current
            if (marker != null) {
                console.log("+++++++++++ THE OUTPUT OF getLatLng IS ++++++++++++ ", marker.getLatLng());
                setPosition(marker.getLatLng());
                setDraggable(false);
            }
            },
        }),
        [],
    );

    const toggleDraggable = useCallback(() => {
        setDraggable((d) => !d)
    }, []);

    const saveLocation = () => {
        console.log("HELLO WORLD");
    };


    return (
        <>
            <Marker
                draggable={draggable}
                eventHandlers={eventHandlers}
                position={[position.lat, position.lng]}
                ref={markerRef}>
                <Popup minWidth={90}>
                    <Button onClick={saveLocation}>Submit</Button>
                </Popup>
            </Marker>
            <Button  onClick={toggleDraggable} variant='contained' className='edit-location-button'>Edit Your Location</Button>

        </>
    );
}
const EditHome = () => {
    const [location, setLocation] = useState({});

    return (
        <React.Fragment>
            <Box
                component="form"
                sx={{
                "& .MuiTextField-root": { m: 1, maxWidth: "100%"},
                }}
                noValidate
                autoComplete="off"
                dir="ltr"
            >
                    <form>
                        <div style={{ paddingLeft: "2.5rem" }}>
                            <Grid item xs={12}>
                                <h6 style={{ fontWeight: "bold", paddingRight: "4.9rem", marginTop: "0.8rem" }}>
                                    Specify The Location of Your Home on The Map
                                </h6>
                                <div className='map-container'>
                                    <MapContainer center={[0, 0]} zoom={16} scrollWheelZoom={true}>
                                        <TileLayer
                                            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                                            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                                        />
                                        <GeoSearchField />
                                        <SetViewToCurrentLocation location={location} setLocation={setLocation}/>
                                        {location.lat && location.lng && (<CustomizeMarker location={location} setLocation={setLocation} />)}
                                    </MapContainer>
                                </div>
                            </Grid>
                         </div>
                    </form>
                </Grid>
            </Box>
        </React.Fragment>
    )
}

export default EditHome;

但我有几个问题.第一个问题是<Button>在 map 中不可见，我想将它设置在 map 的左上角，我已经为它定义了下面的CSS class.

.leaflet-container {
    width: 57rem;
    height: 40rem;
}

.map-container {
    position: relative;
}

.edit-location-button {
    position: absolute;
    top: 10px;
    right: 10px;
}

第二个问题是标记的功能和其位置的更改处理程序.

This is the current output of my implementation: I will be grateful for any help.