почему карта листовки не отображается в приложении для реагирования

Я включил карту листовки с реализацией js вместо реализации jsx, но у меня возникла проблема, так как она выходит за рамки своей области.

вот как я импортировал листовку:

import L from 'leaflet';

и реализовано:

componentDidMount() {
    // create map
    this.map = L.map('map', {
      center: [49.8419, 24.0315],
      zoom: 16,
      layers: [
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }),
      ]
    });
  }

и использование:

<div id={"map"} >

и вот что я получил введите здесь описание изображения


reactjs javascript leaflet react-leaflet
person S.Aminnejad    schedule 14.11.2018    source источник
comment
Проверьте stackoverflow.com/a/38836996/2626313.   -  person xmojmr    schedule 14.11.2018
comment
Возможный дубликат плиток листовок для рисования непересекающихся   -  person peeebeee    schedule 14.11.2018
comment
добавление CSS-файла листовки устранило проблему, спасибо @xmojmr   -  person S.Aminnejad    schedule 14.11.2018

Ответы (2)


arrow_upward
4
arrow_downward

Вы не добавили css-файл листовки в свой index.html.

Для версии брошюры 1.3.4 добавьте в index.html следующее:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
   crossorigin=""/>

В файле css компонента карты переопределите класс leaflet-container с желаемой высотой и шириной.

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

После того, как вы добавили это, используйте Map и TileLayer компоненты react-leaflet для рендеринга карты.

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Map, TileLayer } from "react-leaflet";
import "./styles.css";

class App extends Component {
  state = {
    center: [51.505, -0.091],
    zoom: 13
  };

  render() {
    return (
      <div>
        <Map center={this.state.center} zoom={this.state.zoom}>
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
          />
        </Map>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Вы можете найти рабочий код здесь. https://codesandbox.io/s/2wnv7o1mlr

person Murli Prajapati    schedule 15.11.2018

arrow_upward
0
arrow_downward

Да, вам не хватает файла css.

кстати, это не то, как вы должны использовать react-leaflet. componentDidMount — это не место для того, что вы делаете. Поместите это в рендер, как

import { Map, TileLayer } from 'react-leaflet'; 
<Map>
      <TileLayer url="'http://{s}.tile.osm.org/{z}/{x}/{y}.png'" />
</Map>
person jbccollins    schedule 14.11.2018