如何使用 React 和 React Leaflet 为 return coords lat + lng 放置我的调度函数

Question

我有一个输入（在子组件上）return 通过道具（文本）坐标：

import React, { useEffect, useState, useRef, useMemo } from 'react'
import { useEnderecoValue } from '../../contexts/EnderecoContext'

import 'leaflet/dist/leaflet.css'
import Leaflet from 'leaflet'
import { MapContainer, Marker, useMap, TileLayer, Popup } from 'react-leaflet'

export default function App(text: any) {
  const [lat, setLat] = useState(48.856614)
  const [lng, setLng] = useState(2.3522219)
  const [state, dispatch] = useEnderecoValue()

  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]
  })

  useEffect(() => {
    if (text.text) {
      setLat(text.text.features[0].geometry.coordinates[1])
      setLng(text.text.features[0].geometry.coordinates[0])
    }
  }, [text])

  function SetViewOnClick({ coords }: any) {
    const map = useMap()
    map.flyTo(coords, map.getZoom())
    return null
  }

我的 Marker 是可拖动的，如果我在输入时搜索地址，或者如果 Marker 被拖动，弹出窗口会显示地址和坐标：

const markerRef = useRef(null)

  const eventHandlers = useMemo(
    () => ({
      dragend() {
        const marker = markerRef.current
        if (marker != null) {
          const { lat, lng } = marker.getLatLng()
          setLat(lat)
          setLng(lng)
        }
      }
    }),
    []
  )

  const popup = () => {
    if (text.text) {
      return text.text.query + '   ' + `lat: ${lat}, long: ${lng}`
    }
    return (
      "Address by default" +
      '   ' +
      `lat: ${lat}, long: ${lng}`
    )
  }

  return (
    <MapContainer
      center={[lat, lng]}
      attributionControl={false}
      zoomControl={false}
      zoom={18}
      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={[lat, lng]}
        icon={icon}
        draggable={true}
        ref={markerRef}
        eventHandlers={eventHandlers}
      >
        <Popup>
          <span>{popup()}</span>
        </Popup>
        <SetViewOnClick coords={[lat, lng]} />
      </Marker>
    </MapContainer>
  )
}

当我搜索地址和拖动标记时，如何为 return 坐标放置我的调度函数？（值变化时）

  dispatch({
    type: 'SET_COORDS',
    latitude: lat,
    longitude: lng
  })

Answer 1

在您的 Search comp place dispatch inside searchLocation 中可以更改经纬度。

  const searchLocation = async () => {
    fetch(
      "https://api-adresse.data.gouv.fr/search?" +
        new URLSearchParams({
          q: state.location,
        })
    )
      .then((data) => data.json())
      .then((text) => {
        setResp({ text });
        dispatch({
          type: "SET_COORDS",
          latitude: text.features[0].geometry.coordinates[1],
          longitude: text.features[0].geometry.coordinates[0],
        });
      })
      .catch(function (error) {
        console.log("request failed", error);
      });
  };

将 <Map {...resp} /> 替换为 <Map text={resp} />，因为它会导致多次重新呈现并且页面变得无响应。不确定您要做什么。

Demo

如何使用 React 和 React Leaflet 为 return coords lat + lng 放置我的调度函数

How to place my dispatch function with React and React Leaflet for return coords lat + lng

reactjs

react-leaflet