web-dev-qa-db-ja.com

反応リーフレットマップが正しく表示されない

react-leafletを使用して地図を表示しようとしています。私は this fiddle からのコードを使用していますが、これは機能していますが、私のコンピューターでは次の出力が得られます

enter image description here

これが私のコードです：

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

コンソールにエラーはなく、どこを検索すればよいかわかりません。フィドルは機能しているので、バグではありません。私は何か見落としてますか ？

javascriptcssreactjsleafletreact-leaflet
22
ThomasThiebaud

Leafletスタイルシートをロードしていないようです。

反応リーフレットgithubガイドから：

Leafletに慣れていない場合は、このライブラリを使用する前に、クイックスタートガイドを必ずお読みください。特に、マップを適切にレンダリングし、コンテナの高さを設定するには、ページにCSSを追加する必要があります。

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

必要なものは次のとおりです。

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />

更新：

@ThomasThiebaudが示すように、.leaflet-containerの高さも設定する必要があります


その価値については、ドキュメントページのデザインが不十分です...そしてメンテナはgithubでこの問題に継続的に対処しますが、何らかの理由で問題継続的に必要なセットアップを行わないユーザーの*障害です。/s

30
rambossa

誰かが同じ問題に遭遇した場合に備えて、私はこれを単に追加することで解決しました：

import 'leaflet/dist/leaflet.css';
9
Ange Loron

これを試して

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>
    )
}
}
6
Cem Karakurt

修正するには、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を変更できます。

6
edgar mlowe

leaflet.cssのインポート

import 'leaflet/dist/leaflet.css';

場合によっては、リーフレットファイルを追加した後、画像の読み込みに関して2つのエラーが発生します。これらのエラーを解決するには、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';
let DefaultIcon = L.icon({
            iconUrl: icon,
            shadowUrl: iconShadow
        });
        L.Marker.prototype.options.icon = DefaultIcon;

地図が表示されない場合は、高さと幅（style = {{width： '100％'、height： '400px'}}）をスタイルとしてMapタグに追加します。

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

ここにリンクの説明を入力

4
mohammad

また、このライブラリを使用するのは初めてで、ドキュメントが十分に明確ではありませんでした。しかし、これが機能するために必要だと思うことがいくつかあります。

1。react-leafletパッケージ

2。リーフレットパッケージ：

どちらか、npmを使用してインストールします。

npm install leafletおよび
import 'leaflet/dist/leaflet.css';は、react-leafのMapを使用するファイルにあります。

OR

次の2行をindex.htmlに含めます。

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

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

。これをApp.cssまたはindex.cssに追加し、ファイルをインポートします：（そしてその必要があります）

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

// ORマップコンテナにスタイルを直接追加する

<Map
   center={position}
   zoom={1}
   style={{ height: '100vh', width: '100vh' }}
   >
   <TileLayer .... />
</Map>
1
Bikram Karki
**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/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/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>
1
saurabh

これを試して ：

 var mapid = $(this).find('[id^=leaflet-map]').attr('id');
      var map = settings.leaflet[mapid].lMap;
      map.invalidateSize();
0
Matoeil

これは私の問題を解決しました：

これを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

0
Bruno Filgueiras