В файле Typescript я не могу импортировать «карту» из «response-листовки» и легко исправить ее с помощью «MapContainer». Однако мне нужно добавить к нему функцию onClick, но MapContainer не поддерживает onClick. Я следил за документацией, но это привело меня к новым / дополнительным проблемам ... Мне просто нужно добавить простую функцию onClick, чтобы пользователь мог отмечать местоположение щелчком мыши на такой карте. Кто-нибудь знает простое быстрое решение?

1
Djony 21 Ноя 2020 в 01:48

2 ответа

Лучший ответ
function AddMarkerToClick() {
const [position, setPosition] = useState({ latitude: 0, longitude: 0 });

const map = useMapEvents({
  click(event) {
    const { lat, lng } = event.latlng;
    setPosition({
      latitude: lat,
      longitude: lng,
    });
  },
});

return (
  position.latitude !== 0 ? (
    <Marker
      position={[position.latitude, position.longitude]}
      interactive={false}
      icon={mapIcon}
    />
  ) : null

);}

0
Joao Henrique Silva 22 Ноя 2020 в 15:27

Я следил за документацией по ссылке и, наконец, смог заставить сработать событие «щелчок» и сделать рендеринг «Маркер» на карте. Однако он не указывает Маркер на выбранное место на карте. Он всегда указывает маркер на одно и то же место на карте, а консоль возвращает фиксированное положение (широту, долготу). Листовка мне начинает не нравиться.
https://react-leaflet.js.org/docs/example-events/ < / а>

export default function CreateSomething() {

function LocationMarker() {
 const [ position, setPosition ] = useState({ latitude: 0, longitude: 0 })
  
  const map = useMapEvents({
    click() {
      map.locate()
    },
    locationfound(e) {
      const { lat, lng } = e.latlng;
         setPosition({
            latitude: lat,
            longitude: lng,
          })
      map.flyTo(e.latlng, map.getZoom())
    },
  })

  return (
      position.latitude !== 0 ? 
      <Marker 
        position={[position.latitude, position.longitude]}
        interactive={false} 
        icon={happyMapIcon} 
        />

       : null
  )   
  
}
return (

     <MapContainer  
       <LocationMarker />
     </MapContainer>
     
     )
  }   
0
Djony 21 Ноя 2020 в 21:21