如何移動從 react-leaflet 庫中顯示的彈出窗口

Question

我對反應比較陌生，並且正在使用react-leaflet的 map 創建一個應用程序。 我從標記組件接收 position 道具，並基於該標記 position，我正在顯示一個彈出窗口。誰能讓我知道如何在標記周圍移動彈出窗口以便在彈出窗口后面偷看？

import React,{useRef,useEffect,useState} from "react";
import PropTypes from 'prop-types'
import {Popup} from 'react-leaflet'
import PopupTable from './PopupTable'

const MPopup = ({popUpData,TableData,closePopup}) => {
  return (
    <Popup position={popUpData.pos} maxWidth={popUpData.pStyle} onClose={closePopup}>
    {popUpData.default ? (
      <PopupTable
        name={TableData.schoolName}
        schoolType={TableData.schoolType}
        strength={TableData.strength}
      />
    ) : null}
  </Popup>
  )
}

export default MPopup

Answer 1

您可以使用此問題來回答您的問題。 唯一要做的就是在 react-leaflet 上調整它

您將需要兩個參考。 一個用於 map，一個用於彈出窗口以使用此示例。 您需要使用 useEffect 填充它們，然后通過傳遞 mapRef 和 popupRef 在地圖的單擊偵聽器上調用 makeDraggable。

 const [mapRef, setMapRef] = useState(null);
  const [popupRef, setPopupRef] = useState(null);

  useEffect(() => {
    if (!mapRef || !popupRef) return;

    mapRef.on("click", function (event) {
      makeDraggable(mapRef, popupRef);
    });
  }, [mapRef, popupRef]);

接着

<MapContainer ref={setMapRef}>
...
   <Marker position={position} icon={icon}>
        <Popup ref={setPopupRef}>
        ...
        </Popup>
  </Marker>
</MapContainer>
 

演示