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>)
} }

It would be helpful if any one can help me in rendering the map

回答1:

I just forked your project, made npm install and ran your code and the only thing is missing is MapContainer's height. I did not get the error you are receiving. I am not sure why you get it.

On maps.tsx, MapsComp add style={{ height: "100vh" }} or whatever height suits your needs.

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

And the result is this:

without any errors in the console.

回答2:

You should set the esModuleInterop to true in your tsconfig.json file.

I am using the react-leaflet package with TypeScript too and this is my configuration:

{
  "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"
  ]
}

来源：https://stackoverflow.com/questions/65615254/mapcontainer-tilelayer-marker-popup-react-leaflet

标签

reactjs

typescript

leaflet

react-leaflet