Som*_*ive 3 leaflet reactjs webpack
我正在尝试在 react 组件中实现一个简单的 Leaflet 地图。由于某种原因，地图的图块没有加载或以随机顺序加载。有没有其他人经历过这种情况？
这是应用程序的 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:
'© <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" />;
}
}
有任何想法吗？
.map容器高度。1. 包含传单 CSS
请注意您在评论中提到的工作示例如何导入 Leaflet 资产（在Map/leaflet.js文件中）：
import L from 'leaflet'; // Same as `import * as L from 'leaflet'` with webpack
import 'leaflet/dist/leaflet.css';
请注意，它显式导入 Leaflet CSS 文件。当它丢失时，您的磁贴会出现乱序并散布在您的页面上。
当它们在 JS 文件中被引用时，Webpack 有一个style-loader和css-loader来正确管理这些 CSS 资产。
2.指定地图容器高度
在失败的代码示例中，您<div class="map">使用 CSS指定容器：
.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
| 归档时间： |
|
| 查看次数： |
1190 次 |
| 最近记录： |