Как обновить новое положение моего маркера при перемещении (перетаскивании)? С React-Leaflet

Я использую React-листовку для получения позиции. Я создал текст ввода для поиска, чтобы разместить маркер по адресу API, и я хочу, чтобы можно было перемещать маркер более точно.

Я установил маркер на «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.info(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>
  )
}

Вам придется изменить тернар во всплывающем окне, потому что он не будет выполнять условие. У вас будет 3 случая вместо 2. Как узнать, какой текст показывать? Если вы не хотите, чтобы при перетаскивании маркера сразу отображалась новая позиция

— 09.04.2021 14:46

Да хочу сразу показать новую позицию.

— 09.04.2021 14:55

ОК. Я думал так же. Я написал ответ. Посмотрите и дайте мне знать, поможет ли это вам

— 09.04.2021 14:56

reactjs leaflet react-leaflet

09.04.2021 13:39

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используйте eventHandlers на Marker comp в сочетании с маркером ref для обновления x, y.

const markerRef = useRef(null);

  const eventHandlers = useMemo(
    () => ({
      dragend() {
        const marker = markerRef.current;
        if (marker != null) {
          console.info(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";
  };

Демо

09.04.2021 14:53