在 React 项目中部分加载传单地图答案

【问题标题】：Leaflet map partially loading within React project在 React 项目中部分加载传单地图
【发布时间】：2018-07-18 23:10:51
【问题描述】：

我正在尝试在反应组件中实现一个简单的传单映射。出于某种原因，地图的图块没有加载或以随机顺序加载。有其他人经历过吗？

这是应用程序的 CodeSandbox： https://codesandbox.io/s/3qmp8x4131

代码如下：

import React from "react";
import ReactDOM from "react-dom";
import * as L from "leaflet";

export default class Map extends React.Component {
  map = null;
  componentDidMount() {
    var map = (this.map = L.map(ReactDOM.findDOMNode(this), {
      minZoom: 2,
      maxZoom: 20,
      layers: [
        L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
          attribution:
            '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
        })
      ],
      attributionControl: false
    }));

    map.on("click", this.onMapClick);
    map.fitWorld();
  }

  componentWillUnmount() {
    if (!this.map) return;
    this.map.off("click", this.onMapClick);
    this.map = null;
  }

  onMapClick = () => {
    // Do some wonderful map things...
  };

  render() {
    return <div className="map" />;
  }
}

有什么想法吗？

【问题讨论】：

不知道 reactjs 但这似乎是一个 css 问题。您确定您已正确包含 .css 文件吗？
我添加了一个样式来设置高度和宽度，但问题仍然存在。这是一个有效的反应示例：codesandbox.io/s/d9pkyg3mq

标签： reactjs webpack leaflet

【解决方案1】：

您确实忘记包含 Leaflet CSS 文件。
您错误地指定了 .map 容器高度。

1.包括传单 CSS

注意您在评论中提到的工作示例如何导入传单资产（在Map/leaflet.js 文件中）：

import L from 'leaflet'; // Same as `import * as L from 'leaflet'` with webpack
import 'leaflet/dist/leaflet.css';

请注意，它会显式导入 Leaflet CSS 文件。当它丢失时，您的图块将显示为无序并散布在您的页面上。

Webpack 有一个 style-loader 和 css-loader 可以在 JS 文件中引用这些 CSS 资产时正确管理它们。

2。指定地图容器高度

在失败的代码示例中，您使用 CSS 指定 <div class="map"> 容器：

.map {
  height: 100%;
}

请注意，百分比值基于元素的父节点值，即在本例中为父节点高度的 100%。

您的 DOM 层次结构是：

<html>
  <body>
    <div id="root">
      <div class="App">
        <div class="map">

但是您没有为任何地图容器的祖先（即html、body、#root 和.App）指定任何高度。由于他们唯一的孩子是.map，他们没有任何其他东西可以增加他们的大小，因此他们的高度为0。

而你的.map 的高度是 0 的 100%，即 0。

确保您还为这些祖先指定了一个高度值：

html,
body,
#root,
.App {
  margin: 0;
  height: 100%;
}

或者为您的地图容器使用明确的高度值，例如在px。

更新的 CodeSandbox：https://codesandbox.io/s/zn89pkmn83

【讨论】：

谢谢。缺少的样式表修复了它。