MapContainer，TileLayer，Marker，Popup .. React传单

问题描述

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

I'm developing a map application using React - Typescript - LeafletI'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

推荐答案

我只是分叉了您的项目，进行了npm安装并运行了您的代码，唯一缺少的是 MapContainer 的高度.我没有收到您收到的错误.我不确定为什么会得到它.

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.

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

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>

结果是这样的:

在控制台中没有任何错误.

without any errors in the console.

这篇关于MapContainer，TileLayer，Marker，Popup .. React传单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！