为什么传单地图无法在React应用上呈现

Question

我将传单地图包含在VAR=$(git diff --cached --diff-filter=ACMR | grep -wiE "var_dump|die|console.log") if [ ! -z "$VAR" ]; then echo "You've left a var_dump, die or console.log in one of your files! You don't really want to commit this so aborting now..." exit 1 fi 实现中，而不是js实现中，但是由于它的作用域溢出，我遇到了一个问题。

这是我导入传单的方式：

jsx

并实现：

import L from 'leaflet';

和用法：

componentDidMount() {
    // create map
    this.map = L.map('map', {
      center: [49.8419, 24.0315],
      zoom: 16,
      layers: [
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }),
      ]
    });
  }

这就是我得到的

Answer 1

是的，您缺少css文件。

顺便说一下，这不是您应该使用react-leaflet的方式。 componentDidMount并不是您正在做的事情的地方。将其放入渲染器中

import { Map, TileLayer } from 'react-leaflet'; 
<Map>
      <TileLayer url="'http://{s}.tile.osm.org/{z}/{x}/{y}.png'" />
</Map>

Answer 2

您尚未在index.html中添加传单css文件。

对于传单版本1.3.4，将以下内容添加到index.html

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
   integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
   crossorigin=""/>  

在地图组件css文件中，使用所需的高度和宽度覆盖leaflet-container类。

.leaflet-container {
  height: 600px;
  width: 100%;
}

添加完后，请使用Map的{​​{1}}和TileLayer组件来渲染地图。

react-leaflet

您可以在此处找到有效的代码。 https://codesandbox.io/s/2wnv7o1mlr