MapContainer、TileLayer、Marker、Popup .. React Leaflet

Question

我正在使用 React - Typescript - Leaflet 开发地图应用程序我使用过 ReactLeaflet 包，但是当我使用它时，我在编译问题时遇到错误

import * as React from "react";
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
export default class MapsComp extends React.Component  {
render(){
    return(<div>asdf</div>)
} }

谁能帮我渲染地图就更好了

Answer 1

您应该在 tsconfig.json 文件中将 esModuleInterop 设置为 true。

我也在使用带有 TypeScript 的 react-leaflet 包，这是我的配置：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

Answer 2

我刚刚分叉了你的项目，安装了 npm 和运行你的代码，唯一缺少的是 MapContainer 的 height。我没有收到您收到的错误消息。我不确定你为什么会得到它。

在 maps.tsx、MapsComp 添加 style={{ height: "100vh" }} 或任何适合您需要的高度。

<MapContainer
        center={[51.505, -0.09]}
        zoom={13}
        scrollWheelZoom={false}
        style={{ height: "100vh" }}
>
...
</MapContainer>

结果是这样的：

控制台没有任何错误。

MapContainer、TileLayer、Marker、Popup .. React Leaflet

MapContainer, TileLayer, Marker, Popup .. React Leaflet

leaflet

typescript

reactjs

react-leaflet