反应传单地图未正确显示

2022-01-12 00:00:00 reactjs leaflet javascript css react-leaflet

我正在尝试使用 react-leaflet 来显示地图.我使用

这是我的代码:

DeviceMap.js

从'react'导入反应从'react-leaflet'导入{地图，标记，弹出窗口，TileLayer}；导出类 DeviceMap 扩展 React.Component {构造函数(){极好的();这个.state = {纬度:51.505，液化天然气:-0.09，缩放:13，};}使成为() {常量位置 = [this.state.lat, this.state.lng];返回 (<地图中心={position} zoom={this.state.zoom} scrollWheelZoom={false}>

DeviceTabs.js

导出类 DeviceTabs 扩展 React.Component {状态 = {指数:0};handleTabChange = (索引) =>{this.setState({ index })};使成为 () {返回 (<标签索引={this.state.index} onChange={this.handleTabChange}><标签标签='值'><DeviceTable {...this.props}/></标签><标签标签='地图'><div className={style.leaflet}><设备映射/></div></标签></标签>)}}

style.scss

.leaflet {高度:300px；宽度:100%；}

控制台中没有错误，我不知道在哪里搜索.由于小提琴正在工作，因此它不是错误.我错过了什么吗?

解决方案

看起来你还没有加载 Leaflet 样式表.

来自 react-leaflet GitHub 指南:

<块引用>

如果您不熟悉 Leaflet，请确保在使用此库之前阅读其快速入门指南.您尤其需要将其 CSS 添加到您的页面以正确呈现地图，并设置容器的高度.

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

这是你需要的:

更新

注意 @ThomasThiebaud 表示您可能还需要设置 .leaflet-container

的高度

--

Ange Loron 还提供了一个正确的、可选的 JS 模块导入(相对于 cdn 或样式链接)

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


对于它的价值，文档页面设计不佳...维护者在 GitHub 中不断处理这个问题，但由于某种原因，这个问题是*错误的用户不断不进行所需的设置./s

I'm trying to use react-leaflet to display a map. I use the code from this fiddle which is working, but on my computer I have this output

Here is my code :

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>
    )
  }
}

style.scss

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

There is no error in the console, and I have no more idea where to search. Since the fiddle is working it is not a bug. Did I miss something ?

解决方案

Looks like you haven't loaded in the Leaflet stylesheet.

From the react-leaflet GitHub guide:

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/

Here is what you'll need:

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

Update

Note @ThomasThiebaud indicates you may also have to set up the height of .leaflet-container

--

Ange Loron also gave a correct, optional, JS module import (vs cdn or style link)

import 'leaflet/dist/leaflet.css';


For what its worth, the documentation page is poorly designed... and the maintainer continuously deals with this issue in GitHub, but for some reason, the issue is the *fault of the users who continuously don't do the required setup. /s

相关文章