反应传单地图未正确显示

Question

我正在尝试用来react-leaflet显示地图.我使用这个小提琴的代码正在工作,但在我的电脑上我有这个输出

这是我的代码:

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%;
}

控制台中没有错误,我不知道在哪里搜索.由于小提琴正在运作,它不是一个错误.我错过了什么 ？

Answer 1

以防万一有人遇到同样的问题，我只需添加以下内容即可解决：

import 'leaflet/dist/leaflet.css';

Answer 2

我也是使用这个库的新手，没有找到足够清晰的文档。但是为了使其工作，我认为有一些必要的事情。

1.react-传单包

2.传单包装：

或者，使用 npm 安装它

npm install leaflet并
import 'leaflet/dist/leaflet.css';在您使用Mapfrom的文件中react-leaf。

或者

将这两行包含在index.html：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin=""/>

<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
  integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
  crossorigin=""></script>

3. 将此添加到 App.css 或 index.css 并导入文件：（这是必须的）

.leaflet-container {
  width: 100wh; 
  height: 100vh;
}

// 或直接向地图容器添加样式

<Map
   center={position}
   zoom={1}
   style={{ height: '100vh', width: '100wh' }}
   >
   <TileLayer .... />
</Map>

Answer 3

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

来自react-leaflet github指南:

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

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

这是你需要的:

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

为了它的价值,文档页面的设计很差 ......维护者在github中不断处理这个问题,但由于某种原因,问题是持续不做必要设置的用户的错误.

Answer 4

尝试这个

import React, { Component } from 'react'
import Leaflet from 'leaflet';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet'
import 'leaflet/dist/leaflet.css';

Leaflet.Icon.Default.imagePath =
'../node_modules/leaflet'

delete Leaflet.Icon.Default.prototype._getIconUrl;

Leaflet.Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    iconUrl: require('leaflet/dist/images/marker-icon.png'),
    shadowUrl: require('leaflet/dist/images/marker-shadow.png')
});



export default class MapDisplay extends Component {
state = {
    lat: 41.257017,
    lng: 29.077524,
    zoom: 13,
}


render() {
    const position = [this.state.lat, this.state.lng]
    return (
    <Map center={position} zoom={this.state.zoom} style={{height : '400px'}}>
        <TileLayer
        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={position}>
        <Popup>
            Son Konum
        </Popup>
        </Marker>
    </Map>
    )
}
}

Answer 5

您应该将其添加到您的 CSS 文件中，我遇到了与您相同的问题，并且此方法解决了我的问题：

  @import url("~leaflet/dist/leaflet.css");

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

Answer 6

导入传单.css

import 'leaflet/dist/leaflet.css';

有时，添加传单文件后，图像加载会出现两个错误。为了解决这些错误，在导入部分导入marker-icon.png和marker-shadow.png，然后定义L.Marker.prototype.options.icon：

import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';
import iconRetina from 'leaflet/dist/images/marker-icon-2x.png';
let DefaultIcon = L.icon({
            ...L.Icon.Default.prototype.options,
            iconUrl: icon,
            iconRetinaUrl: iconRetina,
            shadowUrl: iconShadow
        });
        L.Marker.prototype.options.icon = DefaultIcon;

如果地图未显示，请将高度和宽度(style={{width: '100%',height: '400px'}}) 作为样式添加到地图标签：

<Map
center={[35.6892, 51.3890]}
style={{width: '100%',height: '400px'}}
>

添加高度和宽度

Answer 7

在我的情况下，React 添加这有助于：

<MapContainer
        center={{ lat: 51.505, lng: -0.09 }}
        zoom={13}
        style={{ height: "50vh", width: "100%" }}
        scrollWheelZoom={false}
      >

vh至少需要 1 个参数 height 或 width ，否则如果只使用 100%/100% 将不起作用

Answer 8

您可以通过在index.html的head元素内添加以下代码行来进行修复。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css">

<style>
  body {
    padding-bottom: 30px;
  }
  h1, h2, p {
    font-family: sans-serif;
    text-align: center;
  }
  .leaflet-container {
    height: 400px;
    width: 80%;
    margin: 0 auto;
  }
</style>

注意：您可以更改CSS以满足您的需求。