javascript - react 传单 map 未正确显示

Question

我正在尝试使用 react-leaflet 来显示 map 。我使用来自 this fiddle 的代码这是有效的，但在我的电脑上我有这个输出

这是我的代码:

DeviceMap.js

import React from 'react'
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';

export class DeviceMap extends React.Component {
  constructor() {
    super();
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13,
    };
  }

  render() {
    const position = [this.state.lat, this.state.lng];
    return (
      <Map center={position} zoom={this.state.zoom} scrollWheelZoom={false}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <Marker position={position}>
          <Popup>
            <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
          </Popup>
        </Marker>
      </Map>
    );
  }
}

export default DeviceMap

DeviceTabs.js

export class DeviceTabs extends React.Component {
  state = {
    index: 0
  };

  handleTabChange = (index) => {
    this.setState({ index })
  };

  render () {
    return (
      <Tabs index={this.state.index} onChange={this.handleTabChange}>
        <Tab label='Values'>
          <DeviceTable {...this.props} />
        </Tab>
        <Tab label='Map'>
          <div className={style.leaflet}>
            <DeviceMap />
          </div>
        </Tab>
      </Tabs>
    )
  }
}

样式.scss

.leaflet {
  height: 300px;
  width: 100%;
}

控制台没有错误，我不知道去哪里搜索。由于 fiddle 正在工作，因此它不是错误。我错过了什么吗？

Answer 1

看起来您还没有加载 Leaflet 样式表。

来自 react-leaflet GitHub 指南:

If you are not familiar with Leaflet, make sure you read its quick start guide before using this library.You will notably need to add its CSS to your page to render the map properly, and set the height of the container.

http://leafletjs.com/examples/quick-start/

这是你需要的:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />

更新

注意 @ThomasThiebaud 表示您可能还必须设置 .leaflet-container 的高度

--

Ange Loron 还给出了一个正确的、可选的、JS 模块导入(vs cdn 或样式链接)

导入 'leaflet/dist/leaflet.css';

---

就其值(value)而言，文档页面设计不佳...维护人员不断在 GitHub 中处理此问题，但出于某种原因，问题是用户的*错连续不做所需的设置。/s