Question

仅显示一个标记的弹出窗口 react map gl

2021-08-14

2826

reactjs popup mapbox marker react-map-gl

我正在使用 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 }) 如果您希望一次只弹出一个窗口。