4

モーダル内にあるマップを作成しようとしています。しかし、地図は部分的にしか表示されていません。ノードの作成後に試してみinvalidatingSize()ましたが、うまくいかないようです。

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: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> 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*/
    }
}
4

2 に答える 2

3

最後に私は修正しました。コードは正しいですが、リーフレットの依存関係を正しく追加していません。修正したら、すべてが完全に機能しました。実際、 this.map.invalidateSize(); 不要でした。

    「react」から React をインポートします。
    「react-dom」から ReactDOM をインポートする
    「リーフレット」から L をインポートします。

    class Mapa extends React.Component {
        コンストラクタ（小道具）{
            スーパー（小道具）;
            this.state = {
            };
        }

        createMap（要素）{
            var map = L.map(要素);
            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                帰属: 「© OpenStreetMap 寄稿者」
            }).addTo(マップ);
            地図を返す;
        }

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

        componentDidMount(){
            自分自身をこれにしましょう。
            if (this.props.createMap) {
                this.map = this.props.createMap(ReactDOM.findDOMNode(self));
            } そうしないと {
                this.map = this.createMap(ReactDOM.findDOMNode(self));
            }

            this.setupMap();
        }

        与える（）{
            /*id マップで div を返します*/
        }
    }
于 2017-05-21T07:20:04.580 に答える