MapContainer、TileLayer、Marker、Popup .. React Leaflet

如何解决MapContainer、TileLayer、Marker、Popup .. React Leaflet

我正在使用 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>)
} }

如果有人能帮我渲染地图会很有帮助

解决方法

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

我也在使用带有 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"
  ]
}

我刚刚创建了您的项目，安装了 npm 并运行了您的代码，唯一缺少的是 MapContainer 的高度。我没有收到您收到的错误。我不知道你为什么会得到它。

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

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

结果是这样的：

控制台中没有任何错误。