我的传单地图没有出现在我的网页上[重复]答案

【问题标题】：My leaflet map doesn't appear on my webpage [duplicate]我的传单地图没有出现在我的网页上[重复]
【发布时间】：2019-05-16 06:17:36
【问题描述】：

我将 ReactJS 与 NextJS 一起使用。

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

这是我的传单sn-p：

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>
    )
  }
}

任何提示都会很棒，谢谢

【问题讨论】：

有什么错误吗？如果没有，您是否尝试在浏览器控制台中修改宽度/高度？

标签： css reactjs leaflet next.js

【解决方案1】：

我相信您不能将包含地图的 div 的宽度和高度设置为 100%，设置 width:1200px 和 height:600px 或类似的东西。不用担心传单地图反应灵敏

【讨论】：

【解决方案2】：

如果你正在寻找 react 特定的实现，这里是：

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

【讨论】：