Leaflet ReactJS Map 未完全显示图块答案

【问题标题】：Leaflet ReactJS Map does not show tile completelyLeaflet ReactJS Map 未完全显示图块
【发布时间】：2017-10-14 04:33:50
【问题描述】：

您好，我正在尝试创建一个位于模态框内的地图。但是地图只显示了一部分。创建节点后，我尝试过 invalidatingSIze() ，但它似乎不起作用。谢谢！

从“反应”导入反应；从 'react-dom' 导入 ReactDOM 从“传单”导入 L；类 Mapa 扩展 React.Component { 构造函数（道具）{ 超级（道具）；这个.state = { }; } 创建地图（元素）{ var map = L.map(元素); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 归属：'©OpenStreetMap贡献者' }).addTo(地图); 返回地图； } 设置地图（）{ this.map.setView([this.props.lat, this.props.lon], this.props.zoom); this.map.invalidateSize(); } 组件DidMount(){ 让自我=这个；如果（this.props.createMap）{ this.map = this.props.createMap(ReactDOM.findDOMNode(self)); } 别的 { this.map = this.createMap(ReactDOM.findDOMNode(self)); } this.setupMap(); } 使成为（）{ /*返回带有id map的div*/ } }

【问题讨论】：

你的 css 文件是什么样的？有时您需要将地图 div 的高度和宽度设置为 100%。
尝试在 setInterval 中调用 this.map.invalidateSize();

标签： javascript reactjs geolocation leaflet react-leaflet

【解决方案1】：

我使用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';

【讨论】：

感谢您提供的信息，我发现它非常有用，但我遇到了依赖问题。
非常感谢，经过数小时徒劳的尝试，帮助了我

【解决方案2】：

最后我修好了。代码是正确的，但我没有正确添加传单依赖项。一旦我修好了，一切都完美无缺。实际上 this.map.invalidateSize();没有必要。

从“反应”导入反应；从 'react-dom' 导入 ReactDOM 从“传单”导入 L；类 Mapa 扩展 React.Component { 构造函数（道具）{ 超级（道具）；这个.state = { }; } 创建地图（元素）{ var map = L.map(元素); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 归属：'© OpenStreetMap 贡献者' }).addTo(地图); 返回地图； } 设置地图（）{ this.map.setView([this.props.lat, this.props.lon], this.props.zoom); } 组件DidMount(){ 让自我=这个；如果（this.props.createMap）{ this.map = this.props.createMap(ReactDOM.findDOMNode(self)); } 别的 { this.map = this.createMap(ReactDOM.findDOMNode(self)); } this.setupMap(); } 使成为（）{ /*返回带有id map的div*/ } }

【讨论】：