在地图上悬停的每个标记上显示不同的图像
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 的工作示例。
目前我正在使用 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 的工作示例。