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

Question

我正在使用 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>
          ))}

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

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

Show popup for only one Marker react map gl

popup

marker

mapbox

reactjs

react-map-gl