Leaflet ReactJS Map не отображает плитку полностью

Привет, я пытаюсь создать карту внутри модального окна. Но карта отображается только частично. Я пробовал сделать недействительнымSIze () после создания узла, но, похоже, это не сработало. Спасибо!


    import React from 'react';
    import ReactDOM from 'react-dom'
    import L from 'leaflet';

    class Mapa extends React.Component {
        constructor(props){
            super(props);
            this.state = {
            };
        }

        createMap(element){
            var map = L.map(element);
            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution: '© OpenStreetMap contributors'
            }).addTo(map);
            return map;
        }

        setupMap(){
            this.map.setView([this.props.lat, this.props.lon], this.props.zoom);
            this.map.invalidateSize();
        }

        componentDidMount(){
            let self = this;
            if (this.props.createMap) {
                this.map = this.props.createMap(ReactDOM.findDOMNode(self));
            } else {
                this.map = this.createMap(ReactDOM.findDOMNode(self));
            }

            this.setupMap();
        }

        render(){
            /*Returns div with id map*/
        }
    }

reactjs javascript geolocation leaflet react-leaflet
person Antonio682    schedule 15.05.2017    source источник
comment
Как выглядит ваш файл css? Иногда вам нужно установить высоту и ширину div карты на 100%.   -  person Evan Siroky    schedule 16.05.2017
comment
попробуйте вызвать this.map.invalidateSize(); внутри setInterval   -  person Gaurav Mukherjee    schedule 18.05.2017

Ответы (2)


arrow_upward
1
arrow_downward

Я сделал это с помощью JSS:

import jss from 'jss';
import jssDefault from 'jss-preset-default';

import 'leaflet/dist/leaflet.css';

jss.setup(jssDefault());

jss.createStyleSheet({
  '@global': {
    '.leaflet-container': {
      height: '100%',
    },
  },
}).attach();

Leaflet использует глобальные классы CSS. Таким образом, вы можете просто использовать свои глобальные стили, используя css-loader:

styles.css:

:global {
  .leaflet-container {
    height: 100%;
  }
}

component.jsx:

import './styles.css';
person bigslycat    schedule 20.05.2017
comment
Спасибо за информацию. Я нашел ее очень полезной, но у меня возникли проблемы с зависимостями. - person Antonio682; 21.05.2017
comment
Большое спасибо, помогли мне после нескольких часов тщетных попыток - person happyZZR1400; 23.07.2019

arrow_upward
1
arrow_downward

Наконец я исправил. Код правильный, но я неправильно добавил зависимости листовок. Как только я исправил, все работало отлично. Фактически this.map.invalidateSize (); не было необходимости.

    import React from 'react';
    import ReactDOM from 'react-dom'
    import L from 'leaflet';

    class Mapa extends React.Component {
        constructor(props){
            super(props);
            this.state = {
            };
        }

        createMap(element){
            var map = L.map(element);
            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution: '© OpenStreetMap contributors'
            }).addTo(map);
            return map;
        }

        setupMap(){
            this.map.setView([this.props.lat, this.props.lon], this.props.zoom);
        }

        componentDidMount(){
            let self = this;
            if (this.props.createMap) {
                this.map = this.props.createMap(ReactDOM.findDOMNode(self));
            } else {
                this.map = this.createMap(ReactDOM.findDOMNode(self));
            }

            this.setupMap();
        }

        render(){
            /*Returns div with id map*/
        }
    }
person Antonio682    schedule 21.05.2017