Question

我正在使用React Leaflet，并希望在模态内部渲染贴图，并且我在模态中使用React Modal。我附上一张当前地图外观的图片。

该图应该包含在模态的黄色框中。这是我的Leaflet组件以及渲染地图的Modal的代码，最后是我应用于地图的CSS。

传单组件

import React from 'react';
import { Map, TileLayer, Marker, Popup }  from 'react-leaflet';

class ProjectMap extends React.Component {

  constructor(props) {
    super(props);
    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}
          doubleClickZoom={false}
          dragging={false}
          scrollWheelZoom={false}
      >
        <TileLayer
          attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={position}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </Map>
    );
  }
}

export default ProjectMap;

这是模态组件：

return (
        <div className="graph-container">
          <ProjectGraph
            openModal={this.openModal}
            closeModal={this.closeModal}
            data={this.props.projects} />
          <Modal
            isOpen={this.state.openModal}
            onRequestClose={this.closeModal}
            contentLabel="Project Graph Modal"
            style={ModalStyle}
            className="modal-container">
            <div className="black-close-modal-button close-modal-button"
              onClick={this.closeModal}>&times;</div>
            <div className="ft-modal-header-cont">
              <div className="ft-modal-header bylaws-header">
                {projectClicked.title}
              </div>
            </div>
            <div className="project-modal-grid">
                <div className="iframe">iframe</div>

                <div className="temp">temp</div>

                <div className="project-description">description</div>

                <div className="cashflow-graph">cash graph</div>

                <div className="project-map">
                  <ProjectMap />
                </div>
                <div className="project-overlays">overlays</div>
            </div>

          </Modal>
        </div>
      );

最后是网格的CSS，该CSS定义了我想要Map的框的位置以及Leaflet地图的CSS：

.project-modal-grid{
  padding: 9px;
  display: grid;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  grid-template-columns: repeat(12,1fr);
  grid-template-rows: repeat(3,1fr);
  grid-template-areas:
     ". . . f f f f f f t t t"
     "d d d d d d g g g g g g"
     "m m m m m m m m m o o o"
}

.
.
.
.

.project-map{
  grid-area: m;
  background: yellow;
  height: 300px;
}

.leaflet-container {
  height: 200px;
  width: 80%;
  margin: 0 auto;
}

让我知道是否还有其他应提供的内容，我不知道为什么它如此脱节。谢谢。

传单地图无法正确呈现

0 个答案: