在地图上悬停的每个标记上显示不同的图像

Having a different image shown on each Marker hover on a Map

目前我正在使用 ReactMapGL 作为我的地图组件。在这里,我使用它的 HTMLOverlay 功能在我将鼠标悬停在标记上方时带来全屏弹出窗口。我目前为我的所有标记设置了不同的图像数据,但是当我将鼠标悬停在标记上时,我只能为所有标记获得 1 个相同的图像。如何让标记显示其各自的图像?

为了更好的参考,我添加了一个codesandbox: https://codesandbox.io/s/full-popup-mapbox-Whosebug-forked-p8934?file=/src/App.js:1540-1551

这是我的代码:

<ReactMapGL
          {...viewport}
          mapboxApiAccessToken={YOURMAPBOXTOKEN}
          mapStyle="mapbox://styles/mapbox/dark-v9"
          onViewportChange={(viewport) => {
            setViewport(viewport);
          }}
        >
          {posts &&
            posts.map((item) => (
              <HTMLOverlay
                redraw={(props) => {
                  {
                    /* todo: grow animation from center */
                  }
                  return (
                    <div
                      style={{
                        backgroundColor: "rgba(255, 0, 0, 0.5)",
                        width: isPopupShown ? props.width : 0,
                        height: isPopupShown ? props.height : 0,
                        transition: "all .2s ease-in-out",
                        transform: "scale(1.1)",
                        overflow: "hidden",
                        alignItems: "center",
                        justifyContent: "center"
                      }}
                    >
                      {/* todo: text/content position */}
                      <img src={item.backgroundImage} alt="bg" />
                    </div>
                  );
                }}
              />
            ))}

          {posts &&
            posts.map((item) => (
              <Marker
                key={item.id}
                latitude={item.latitude}
                longitude={item.longitude}
              >
                <button className="marker-btn">
                  <img
                    style={{
                      width: 48,
                      height: 48
                    }}
                    onMouseEnter={() => {
                      setSelectedProperty(item);
                      setIsPopupShown(true);
                    }}
                    onMouseOut={() => {
                      setSelectedProperty(null);
                      setIsPopupShown(false);
                    }}
                    alt="Marker"
                  />
                </button>
              </Marker>
            ))}
        </ReactMapGL>

您必须有选择地为当前悬停在图钉上的任何内容呈现 HTMLOverlap。

   {selectedProperty && (
            <HTMLOverlay
              redraw={(props) => {
                {
                  /* todo: grow animation from center */
                }
                return (
                  <div
                    style={{
                      width: isPopupShown ? props.width : 0,
                      height: isPopupShown ? props.height : 0,
                      transition: "all .2s ease-in-out",
                      transform: "scale(1.1)",
                      overflow: "hidden",
                      alignItems: "center",
                      justifyContent: "center",
                      backgroundImage: `url(${selectedProperty.backgroundImage})`,
                      backgroundSize: "cover",
                      backgroundRepeat: "no-repeat"
                    }}
                  >
                    {/* some text */}
                  </div>
                );
              }}
            />
          )}

这是一个 sandbox 的工作示例。