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 でこの問題に継続的に取り組んでいますが、何らかの理由で、この問題は必要なセットアップを継続的に行わないユーザーの*過失です。/秒

于 2016-11-01T17:56:46.423 に答える
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 に答える
7

私の場合、React を追加すると次のようになりました。

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

vhで少なくとも 1 つのパラメーターの高さまたは幅である必要があります。そうしないと、100%/100% のみを使用すると機能しません

于 2020-11-27T00:07:00.743 に答える