[英]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.