它应该是这样的吗？
我关注了https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/simple.js以及主页快速入门。
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"leaflet": "^1.3.4",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-leaflet": "^2.1.2",
"react-scripts": "2.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
最佳答案
查看“react-leaflet”的文档，它指出以下内容:
You will notably need to add its CSS to your page to render the map properly, and set the height of the container (full text: https://react-leaflet.js.org/docs/en/setup.html#docsNav)
您可以尝试设置 Map 元素的宽度和高度(例如，我需要宽度为父容器的 100%，固定高度为 450px):
<Map center={position} zoom={this.state.zoom} style={{width: '100%', height: 450}}>
...
这将为您提供一个带有缩放选项的框，但您不会看到 map 本身，因为您现在缺少 map 样式，因此需要导入它:
@import '~leaflet/dist/leaflet.css';
您还可以在 HTML 中添加 CSS:
<link rel="stylesheet" href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="68040d090e040d1c2859465d4659" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
关于React-Leaflet 入门，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53751656/