React-Leaflet入门

Question

应该看起来像这样吗？

我遵循了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"
  ]
}

Answer 1

查看“ react-leaflet”的文档，它显示以下内容：

  

您将特别需要在页面上添加其CSS才能正确呈现地图，并设置容器的高度（全文：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}}>
...

这将为您提供一个带有缩放选项的框，但由于您现在缺少地图样式，因此您将看不到地图本身，因此需要导入它：

@import '~leaflet/dist/leaflet.css';

您还可以在HTML中添加CSS：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>

Answer 2

缺少传单CSS和/或地图容器的宽度和高度。

或者您可能需要使用map.invalidateSize()，因为您的容器大小已更改，将更新地图以适应新的容器大小。