Draggable Marker
Live Editor
const center = {lat: 51.505,lng: -0.09,}function DraggableMarker() {const [draggable, setDraggable] = useState(false)const [position, setPosition] = useState(center)const markerRef = useRef(null)const eventHandlers = useMemo(() => ({dragend() {const marker = markerRef.currentif (marker != null) {setPosition(marker.getLatLng())}},}),[],)const toggleDraggable = useCallback(() => {setDraggable((d) => !d)}, [])return (<Markerdraggable={draggable}eventHandlers={eventHandlers}position={position}ref={markerRef}><Popup minWidth={90}><span onClick={toggleDraggable}>{draggable? 'Marker is draggable': 'Click here to make marker draggable'}</span></Popup></Marker>)}render(<MapContainer center={center} zoom={13} scrollWheelZoom={false}><TileLayerattribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"/><DraggableMarker /></MapContainer>,)
Result
Loading...