60

我正在尝试使用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>
    )
  }
}

样式.scss

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

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

4

16 回答 16

93

看起来您尚未加载 Leaflet 样式表。

来自react-leafletGitHub 指南:

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

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 或样式链接)

import 'leaflet/dist/leaflet.css';



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

于 2016-11-01T17:56:46.423 回答
35

我也是使用这个库的新手,并且没有找到足够清晰的文档。但是,为了使它起作用,我认为有几件事是必要的。

1. react-leaflet 包

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>

于 2020-04-02T14:22:56.267 回答
27

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

import 'leaflet/dist/leaflet.css';
于 2019-04-17T18:32:56.907 回答
16

尝试这个

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>
    )
}
}
于 2019-05-17T13:03:14.123 回答
11

您可以通过在 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 以满足您的需要。

于 2018-09-24T14:11:10.313 回答
9

导入传单.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;

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

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

添加高度和宽度

于 2019-08-16T20:00:56.720 回答
7

在我使用 React 的情况下,添加这有助于:

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

它需要至少 1 个参数 height 或 width 与vh,否则如果你只使用 100%/100% 将无法工作

于 2020-11-27T00:07:00.743 回答
7

你应该把它添加到你的 CSS 文件中,我和你有同样的问题,这个方法解决了我的问题:

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

.leaflet-container {
  width: 100%;
  height: 100vh;
}
于 2021-01-25T23:16:09.367 回答
4

如果有人正在寻找如何将其嵌入到一个单独的组件中,我在经过一番努力后想出了如何做到这一点

import React from 'react';
import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
import './MapObject.css'

const position = [51.505, -0.09]
class MapObject extends React.Component {
    render() {

        return (
                <MapContainer center={position} zoom={13} 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}>
                <Popup>
                    A pretty CSS3 popup. <br /> Easily customizable.
                </Popup>
                </Marker>
            </MapContainer>           
        );
    }
}

然后简单地加载

import MapObject from './MapObject'

而且 MapObject.css 需要看起来像这样(没有这个它根本不会出现)

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

生成的地图在这里:

在此处输入图像描述

于 2021-02-05T01:34:04.917 回答
3
**Go to your react app folder my-app/public/index.html open index.html

and pest this two links in head tag
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>

</head>**



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <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>
    #mpp {

            overflow: hidden;
        }
    </style>
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>
于 2019-04-13T07:11:58.823 回答
1

我不知道为什么,添加 Leaflet css 文件是不够的......

看来您还必须添加:

.leaflet-container{
  height:500px;
}
于 2021-04-09T02:30:27.667 回答
1

这解决了我的问题:

将此添加到 index.html

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

<style>
  .leaflet-container {
   height: 400px;
   width: 800px;
 }
</style>

来源:https ://medium.com/@eugenebelkovich/map-for-react-apps-with-leaflet-365f9df82d55

于 2020-01-01T19:03:27.277 回答
0

即使设置了高度和 CSS,我的地图也完全没有显示出来。您需要将以下传单 cdn 和 css 添加到您的 index.html 文件中才能正常工作:

<link rel="stylesheet" 
href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css">    
<style>
     .leaflet-container {
       height: 500px;
       width: 960px;
     }    </style>

    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
      integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
      crossorigin=""></script>
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
于 2020-11-23T08:04:04.613 回答
0

尝试这个 :

 var mapid = $(this).find('[id^=leaflet-map]').attr('id');
      var map = settings.leaflet[mapid].lMap;
      map.invalidateSize();
于 2020-01-06T15:05:58.540 回答
0

在 Leaflet Map 中,如果您的地图未正确显示,则此问题是由 CSS 文件引起的。

在你的 public/index.html 中试试这个 CSS

<link href='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css' rel='stylesheet'>
于 2020-10-28T05:08:07.477 回答
0

如果这些都不适合您,您可以尝试在页面加载时手动调整窗口大小。

window.dispatchEvent(new Event('resize'));
于 2020-11-17T14:42:28.927 回答