Question

我正在将ReactJS与NextJS一起使用。

当前，我的传单无法填充页面上的整个父级div，实际上它根本没有出现。我以为地图会填满整个父级div，也许有人有想法来处理这种情况。

这是我的传单摘要：

const Wrapper= styled.div` 
  width:${props => props.width};
  height:${props => props.height};
`;

const location= [34.0522, -118.2457]
export default class Map extends Component{ 
  componentDidMount(){  
    // Map = require('react-leaflet').Map
    // Marker = require('react-leaflet').Marker
    // Popup = require('react-leaflet').Popup
    // TileLayer = require('react-leaflet').TileLayer
    // Tooltip = require('react-leaflet').Tooltip
    // this.setState({ showMap: true })
    this.map= L.map("map", { 

      center:location,
      zoom:12,
      zoomControl:true
    })
    L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
      maxZoom: 20,
      attribution: '&copy; Openstreetmap France | &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    })
    .addTo(this.map) 

    var marker = L.marker(location ,{icon: placeholder}).addTo(this.map); 
    setTimeout( ()=> {
      marker.bindPopup("Come see us, it would be awesome!", {maxWidth: "500"});  

   this.map.setView(location);
  }

  render(){ 
    return (
      <Fragment>
          <Head>
          <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/images/marker-icon-2x.png"/>
          <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/images/marker-icon.png"/>

          <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
   integrity="yyyy"
   crossorigin=""/> 

     <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
   integrity="yyyyy"
   crossorigin=""></script>   
          </Head>
        <Wrapper width="100%" height="100%" id="map"/> 
      </Fragment>
    )
  }
}

任何提示都会很棒，谢谢

Answer 1

我相信您不能将包含地图的div的宽度和高度设置为100％，设置width：1200px和height：600px或类似的值。不用担心传单地图会响应

Answer 2

如果您正在寻找特定于反应的实现，则为：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Map, TileLayer, Marker, Popup } 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"
          />
          <Marker position={this.state.center}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </Map>
      </div>
    );
  }
}

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

并将此样式添加到您的CSS文件中。

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

以下是工作代码：https://codesandbox.io/s/2wnv7o1mlr

我的传单地图没有出现在我的网页上

2 个答案: