反应传单地图不显示

Posted 2023-03-27

【中文标题】反应传单地图不显示

【英文标题】：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。我不在这个组件中使用引导程序

谷歌地图可以很好地完成我想要完成的同一件事，但我不知道他们是否可以免费使用它，我的意思是不要显示标签（仅适用于开发人员） .所以这就是我使用传单的原因。我最终应该使用谷歌地图吗？

【参考方案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 文件的更好方法！