如何解决反应传单基本教程地图无法正确显示地图
我按照反应传单安装并获得了 setup page 。他们为我提供了一个代码片段,用于查看基本示例。然而,这是我得到的。不知道我搞砸了哪些步骤。
import { GlobalStyle } from '../Theme';
import { MapContainer,TileLayer,Marker,Popup } from 'react-leaflet';
import styled from 'styled-components';
import Header from '../components/Header';
const StyledLocationsPageContainer = styled.div`
width: 100%;
.leaflet-map-container {
height: 25rem;
}
`;
function Locations() {
return (
<StyledLocationsPageContainer>
<GlobalStyle />
<main>
<Header />
<div className="leaflet-map-container">
<MapContainer
center={[51.505,-0.09]}
zoom={13}
scrollWheelZoom={false}>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[51.505,-0.09]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
</div>
</main>
</StyledLocationsPageContainer>
);
}
export default Locations;
这是我的包 .json 文件:
"dependencies": {
"@testing-library/jest-dom": "^5.11.9","@testing-library/react": "^11.2.3","@testing-library/user-event": "^12.6.0","leaflet": "^1.7.1","react": "^17.0.1","react-dom": "^17.0.1","react-leaflet": "^3.0.5","react-scripts": "4.0.1","styled-components": "^5.2.1","web-vitals": "^0.2.4"
}
在 index.html 中插入以下链接后,它就变成了空白区域,宽度和高度是我分配给包装器 div 的,
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""
/>
解决方法
您需要明确地为您的 MapContainer
分配高度
<MapContainer
center={[51.505,-0.09]}
zoom={13}
scrollWheelZoom={false}
style={{height: '100vh'}}> //here assign the height
>
...
而不是要按预期显示的 MapContainer
的包装器
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。