反应传单地图不显示答案

【问题标题】：react-leaflet map does not show up反应传单地图不显示
【发布时间】：2021-02-28 03:40:55
【问题描述】：

我的一个组件中有这段代码

class MyMap extends Component {

   state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 11
    };

    render() {
        const position = [this.state.lat,this.state.lng]
         return (
             <MapContainer  className="mymap" center={position} zoom={this.state.zoom}  scrollWheelZoom={false}>
             <TileLayer
                   attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>  contributors'
                   url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
              />
              <Marker position={position}>
              </Marker>
            </MapContainer >
      )
  }
}

我也通过这个命令安装了传单

  npm install -s react-leaflet

我还在我的 index.html 文件中插入了传单的 CSS

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>

我也给 MapContainer 一个

ClassName="mymap"

其中包括以下 CSS 代码

 .mymap {
     height: '100vh';
     width: 100%;
}

所以我的问题是我的地图没有显示出来，谁能帮帮我？

【问题讨论】：

这可能与不同的事情有关......控制台中的任何错误？您是否在组件文件的顶部导入 Map 组件等？
我是这样导入它们的：import { MapContainer , TileLayer, Marker, Popup } from 'react-leaflet';
尝试在您的 .mymapp 类中添加 600 像素的最小高度
我在控制台中收到一条错误消息：localhost:3000/vendor/bootstrap/css/bootstrap.min.css 无法加载，因为 MIME 文本/html 类型不是文件文本/css。我不在这个组件中使用引导程序
谷歌地图可以很好地完成我想要完成的同一件事，但我不知道他们是否可以免费使用它，我的意思是不要显示标签（仅适用于开发人员） .所以这就是我使用传单的原因。我最终应该使用谷歌地图吗？

标签： reactjs leaflet react-leaflet

【解决方案1】：

导入leaflet.css

import 'leaflet/dist/leaflet.css'

然后为<MapContainer>设置内联样式

<MapContainer style={{ height: "450px", width: "100%" }} center={position} zoom={this.state.zoom}>

【讨论】：

为我工作。对于全高地图，我使用height: 100vh。使用100% 不显示任何图块

【解决方案2】：

我解决了我的问题。我必须从我的 index.html 中摆脱它

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq /sMZMZ19scR4PsZChSR7A=="
  crossorigin=""/>

我也在我的 MyMap 组件中插入了这个

 import 'leaflet/dist/leaflet.css';

【讨论】：

很高兴您能修复它，这是包含 css 文件的更好方法！