仅显示一个标记反应贴图 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>
          ))}

Answer 2

您需要单独跟踪每个弹出窗口状态，然后阻止 onClick 的传播，使其不会关闭。

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

// marker & popup

          {landmarkData.map((data, index) => (
            <div key={data._id}>
              <Marker
                key={index}
                longitude={data.longitude}
                latitude={data.latitude}
                onClick={(e) => {
            // If we let the click event propagate to the map, it will immediately close the popup
            // with `closeOnClick: true`
            e.originalEvent.stopPropagation();
            setPopupOpen({ [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>
          ))}

它与@Manish的答案类似（归功于他），但需要防止传播，如果您只想一次只有一个弹出窗口，请使用

setPopupOpen({ [data._id]: true })

。