移动(拖动)标记时，如何更新标记的新位置?带有React传单

Question

我正在使用React传单来检索职位。我创建了一个搜索输入文本，以按API地址放置标记，我希望可以更精确地移动标记。

我已将标记设置为"0"；draggable＝true"；但我想更新x和y的位置，并将其显示在弹出窗口中。请问怎么做？

import React, { useEffect, useState } from 'react'
import 'leaflet/dist/leaflet.css'
import Leaflet from "leaflet";
import L from "leaflet";
import { MapContainer, Marker, useMap, TileLayer, Popup } from 'react-leaflet'
export default function App(text: any) {
const [x, setX] = useState(2.3522219)
const [y, setY] = useState(48.856614)
console.log(y, x);
const icon = new Leaflet.DivIcon({
className: 'custom-div-icon',
html:
"<div style='background-color:#c30b82;' class='marker-pin'></div><i class='material-icons'><img src='img/marker-icon.png'></i>",
iconSize: [30, 42],
iconAnchor: [15, 42],
popupAnchor: [-3, -42]
})
function SetViewOnClick({ coords }: any) {
const map = useMap()
map.setView(coords, map.getZoom())
return null
}
useEffect(() => {
if (text.text) {
setX(text.text.features[0].geometry.coordinates[0])
setY(text.text.features[0].geometry.coordinates[1])
}
}, [text])
return (
<MapContainer
center={[y, x]}
attributionControl={false}
zoomControl={false}
zoom={12}
style={{
height: '350px',
position: 'relative',
outline: 'none',
maxWidth: '696px',
display: 'block',
margin: '15px auto',
width: '100%'
}}
>
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
<Marker position={[y, x]} icon={icon} draggable={true}>
<Popup>
<span>
{text.text
? text.text.query
: "Location Default"}
</span>
</Popup>
<SetViewOnClick coords={[y, x]} />
</Marker>
</MapContainer>
)
}

Answer 1

将Marker comp上的eventHandlers与标记ref结合使用以更新x，y。

const markerRef = useRef(null);
const eventHandlers = useMemo(
() => ({
dragend() {
const marker = markerRef.current;
if (marker != null) {
console.log(marker.getLatLng());
const { lat, lng } = marker.getLatLng();
setX(lng);
setY(lat);
setMarkerDragged(true);
}
}
}),
[]
);
...

<Marker
position={[y, x]}
icon={icon}
draggable={"true"}
ref={markerRef}
eventHandlers={eventHandlers}
>
<Popup>
<span>{popup()}</span>
</Popup>
<SetViewOnClick coords={[y, x]} />
</Marker>

当拖动标记时，您也可以使用标志来显示新的弹出消息，但最终取决于您如何显示弹出消息以评估三种不同的条件。

const [markerDragged, setMarkerDragged] = useState(false);
const popup = () => {
if (markerDragged) return `New latitude: ${y}, new longitude: ${x}`;
return text ? text.query : "Location Default";
};

演示