gpt4 book ai didi

javascript - React Leaflet - 在 map 中心对齐弹出窗口

转载 作者:行者123 更新时间:2023-12-03 14:11:05 24 4
gpt4 key购买 nike

如果我单击一个标记,我想将 map View 平移到该标记的中心。到目前为止,这适用于我的项目。此外,我希望打开的弹出窗口在 map View 的中心对齐。

我想我可以使用 leaflet-popup 类对其进行硬编码,如下所示:

.leaflet-popup {
transform: translate(-40%, 50%) !important;
}

但这不起作用。我的代码的问题是,弹出窗口的位置独立于 map View 。但按照现在的看法应该是居中。我可以向您展示我的 map 设置:

编辑

我提供了CodeSandBox链接来玩。单击顶部的标记,您将看到弹出窗口未与屏幕中心对齐:

map 组件

const {Map, TileLayer, Marker, GeoJSON} = ReactLeaflet;

function MapOverlay({setSwipeState}) {
const mapRef = useRef(null);
const [donationLocations] = useState([
[48.135125, 11.581981], [58.403, 20.420], [43.300, 40],
[70.505, -20], [40.505, -80], [-40.505, -10]
]);


function centerMapView(e) {
const {leafletElement} = mapRef.current;

if(e) {
leafletElement.setView(e.popup._latlng); // center view to where popup opens
// todo: align popup in the middle of the screen
// Get bounds of map view, divide it by 2 and apply coorditanes to the popup position


}

}

function getMapData() {
return (
<div>
{
donationLocations.map((position, i) =>
(
<Marker position={position} key={i}>
<MarkerPopup/>
</Marker>
)
)
}
</div>
)
}

return (
<Map
ref={mapRef}
center={[45.000, 10.000]}
zoom={3}
onPopupopen={centerMapView.bind(this)}
zoomControl={false}
minZoom={3}
bounceAtZoomLimits={true}
maxBoundsViscosity={.95}
maxBounds={[[-180, -90], [180, 90]]}
>
<TileLayer
noWrap={true}
attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors | &amp;copy <a href="https://apps.mapbox.com/feedback/">Mapbox</a>'
url={'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=' + process.env.REACT_APP_MAPBOX_KEY}
/>
{getMapData()}
</Map>
)
}

标记弹出组件

const {Popup} = ReactLeaflet;

export default function MarkerPopup() {

return (
<Popup
autoPan={false} // Important part here
>
<Card>
...
</Card>
</Popup>
);
}

最佳答案

我设法让它工作。解决方案是创建一个与 DOM 分离的模式对话框。

您可以看到工作代码:Here

// Pass open state an setOpen function from the parent
function MarkerPopup({open, setOpen}) {
const classes = useStyles();

function handleClose() {
setOpen(false);
}

return (
<Popup
autoPan={false}
>
<Modal
className={classes.modal}
open={open}
classes={{root: classes.root}}
onClose={handleClose.bind(this)}
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 0,
invisible: true
}}
>
<Card className={classes.card}>
<CardMedia
className={classes.media}
image="https://material-ui.com/static/images/cards/contemplative-reptile.jpg"
title="Contemplative Reptile"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Lizard
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
across all continents except Antarctica
</Typography>
</CardContent>
<CardActions>
<Button size="small" color="primary">
Details
</Button>
<Button size="small" color="primary">
Donate
</Button>
</CardActions>
</Card>
</Modal>
</Popup>
);
}

关于javascript - React Leaflet - 在 map 中心对齐弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58938074/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com