个人中心
gpt4 book ai didi

reactjs - React 项目中部分加载的 Leaflet map

转载 作者：行者123 更新时间：2023-12-03 14:03:21 25 4
gpt4 key购买 nike

我正在尝试在 react 组件中实现一个简单的传单 map 。由于某种原因， map 的图 block 没有加载或以随机顺序加载。还有其他人经历过这种情况吗？

这是应用程序的 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" />;
  }
}

有什么想法吗？

最佳答案

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

<强>1。包括传单 CSS

请注意您在评论中提到的工作示例如何导入 Leaflet Assets (在 Map/leaflet.js 文件中):

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

请注意，它显式导入了 Leaflet CSS 文件。如果缺少它，您的图 block 将显示为随机排列并散布在页面上。

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

<强>2。指定 map 容器高度

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

.map {
  height: 100%;
}

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

您的 DOM 层次结构是:

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

但是您尚未为任何 map 容器的祖先指定任何高度(即 html 、 body 、 #root 和 .App )。因为他们唯一的 child 是.map ，它们没有任何其他东西可以增加它们的大小，因此它们的高度为 0。

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

确保您还为每个祖先指定一个高度值:

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

或者为您的 map 容器使用明确的高度值，例如在px .

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

关于reactjs - React 项目中部分加载的 Leaflet map ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51412179/

25 4 0
文章推荐： asp.net - 使用 f#/fable/asp.net/react 添加 google 登录按钮
文章推荐： security - 如何为旨在保护密码的哈希函数选择盐？
文章推荐： memory-management - 使用clCreateBuffer + CL_MEM_COPY_HOST_PTR创建缓冲区对象与clCreateBuffer + clEnqueueWriteBuffer创建缓冲区对象有什么区别？
文章推荐： ReactJS -- 类型错误 : Cannot read property 'name' of undefined
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com