仅显示一个标记反应图 gl 的弹出窗口

Posted 2023-05-06

【中文标题】仅显示一个标记反应图 gl 的弹出窗口

【英文标题】：Show popup for only one Marker react map gl

【发布时间】：2021-10-17 08:28:19

【问题描述】：

我正在使用react-map-gl 并声明，当单击标记时，popupOpen 设置为 true 并显示弹出窗口。

这适用于只有一个标记的地图，但是当我使用地图功能发送多个标记的坐标时，点击其中任何一个都会打开所有弹出窗口，因为绑定状态会控制它们。

我如何设置它以便只显示与特定标记相关的弹出窗口？

// state
const [popupOpen, setPopupOpen] = useState(false);

// marker & popup

          landmarkData.map((data, index) => (
            <div key=data._id>
              <Marker
                key=index
                longitude=data.longitude
                latitude=data.latitude
                onClick=() => setPopupOpen(true)
              >
                <RoomIcon fontSize="small" style=fill: "red" />
              </Marker>
              popupOpen && (
                <Popup
                  key=index
                  latitude=data.latitude
                  longitude=data.longitude
                  onClose=() => setPopupOpen(false)
                  closeButton=true
                  offsetLeft=10
                >
                  <span style=fontSize: "1vw", fontFamily: "Poppins">
                    data.name
                  </span>
                </Popup>
              )
            </div>
          ))

【参考方案1】：

您应该单独跟踪弹出窗口的打开状态；像这样：

// state
const [popupOpen, setPopupOpen] = useState();

// render


          landmarkData.map((data, index) => (
            <div key=data._id>
              <Marker
                key=index
                longitude=data.longitude
                latitude=data.latitude
                onClick=() => setPopupOpen(...popupOpen, popupOpen[data._id]: true )
              >
                <RoomIcon fontSize="small" style=fill: "red" />
              </Marker>
              popupOpen[data._id] && (
                <Popup
                  key=index
                  latitude=data.latitude
                  longitude=data.longitude
                  onClose=() => setPopupOpen(false)
                  closeButton=true
                  offsetLeft=10
                >
                  <span style=fontSize: "1vw", fontFamily: "Poppins">
                    data.name
                  </span>
                </Popup>
              )
            </div>
          ))