如何解决React-leaflet 不显示加载了 Leaflet.css 或调整大小的地图
我正在使用传单进行反应项目,但它不显示地图,这是地图组件:
import React from "react";
import { MapContainer,TileLayer,useMap } from "react-leaflet";
import "./map.css";
function Map({center,zoom }) {
return (
<MapContainer
className="map"
center={center}
zoom={zoom}
scrollWheelZoom={false}
style={{height:'450px'}}
>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
</MapContainer>
);
}
export default Map;
index.html
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;500;700;900&display=swap" rel="stylesheet">
CSS:
.map {
background-color: #424242;
padding: 1rem;
border-radius: 20px;
margin-top: 16px;
box-shadow: 0 0 8px -4px rgba(0,0.5);
}
这是在 index.html 中没有样式表的情况下的显示方式:
这是它如何与 stlyesheet 一起显示,就像什么都没有:
这里也是依赖:
"dependencies": {
"@material-ui/core": "^4.11.4","@testing-library/jest-dom": "^5.12.0","@testing-library/react": "^11.2.6","@testing-library/user-event": "^12.8.3","chart.js": "^3.2.0","leaflet": "^1.7.1","numeral": "^2.0.6","react": "^17.0.2","react-chartjs-2": "^3.0.3","react-dom": "^17.0.2","react-leaflet": "3.0.5","react-scripts": "4.0.3","sass": "^1.32.11","web-vitals": "^1.1.1"
},
谢谢
解决方法
你应该导入css表单传单dist
import "leaflet/dist/leaflet.css";
这是我制作的样板
/* eslint-disable */
import React,{ useRef,useState } from "react";
import { Map,TileLayer,LayersControl } from "react-leaflet";
import "leaflet/dist/leaflet.css";
const App = () => {
const mapRef = useRef();
const [bounds,setbounds] = useState([
[-90,-180],[90,180],]);
return (
<>
<Map
ref={mapRef}
center={[0,0]}
zoom={3}
maxZoom={19}
minZoom={2}
bounceAtZoomLimits={true}
maxBoundsViscosity={0.95}
maxBounds={bounds}
>
<LayersControl position="topright">
<LayersControl.BaseLayer name="OpenStreet">
<TileLayer
noWrap={false}
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name="Satellite">
<TileLayer
noWrap={false}
url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.png"
/>
</LayersControl.BaseLayer>
<LayersControl.BaseLayer checked name="Dark">
<TileLayer
noWrap={false}
url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
/>
</LayersControl.BaseLayer>
</LayersControl>
</Map>
</>
);
};
export default App;
不要忘记用这个类创建一个css
.leaflet-container {
width: 100%;
height: 100vh;
}
还要记住我正在使用
"react-leaflet": "^2.7.0","leaflet": "^1.7.1"
版本
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。