[英]MapContainer, TileLayer, Marker, Popup .. React Leaflet
I'm developing a map application using React - Typescript - Leaflet I've used ReactLeaflet package but when I'm using it I'm facing error while compiling issues
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>)
} }
如果有人可以帮助我渲染 map,那将很有帮助
我刚刚分叉了您的项目,安装了 npm 并运行了您的代码,唯一缺少的是MapContainer
的高度。 我没有收到您收到的错误。 我不确定你为什么会得到它。
在 maps.tsx 上, MapsComp
添加style={{ height: "100vh" }}
或任何适合您需要的高度。
<MapContainer
center={[51.505, -0.09]}
zoom={13}
scrollWheelZoom={false}
style={{ height: "100vh" }}
>
...
</MapContainer>
结果是这样的:
控制台中没有任何错误。
您应该在tsconfig.json
文件esModuleInterop
设置为true
。
我也在使用带有 TypeScript 的react-leaflet
package,这是我的配置:
{
"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"
]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.