时间戳

首页 > 解决方案 > 添加css后没有出现react-leaflet

javascript - 添加css后没有出现react-leaflet

问题描述

我在 rc-tabs 组件中有一个地图组件

import React from "react";
import {Map as LeafMap, TileLayer, Marker, Popup} from "react-leaflet";

const Map = () => {

    return (
        <div className="leaflet-appearance">
            <LeafMap center={[59.95, 30.33]} zoom={11}>
                <TileLayer
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                <Marker position={[59.95, 30.33]}>
                    <Popup>
                        A pretty CSS3 popup. <br/> Easily customizable.
                    </Popup>
                </Marker>
            </LeafMap>
        </div>
    )
};

export default Map

它被渲染了。不好 - 一些图块没有加载，缩放时大小不同，但它是可见的。以某种方式工作的反应传单的图片：

我想修复它。我在 index.html 文件中添加了一个 CSS

<!-- Leaflet Maps Styling  -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>

并在 Map.css 中设置宽度

.leaflet-appearance {
    height: 200px;
    width: 200px;
}

传单不起作用：

我该如何解决？

标签： javascriptreactjsleafletreact-leaflet

解决方案

显然，您没有正确设置地图的高度，并且代码中的 leaflet.css 导入也有问题

应该是这样的：

import React from "react";
import "rc-tabs/assets/index.css";
import "leaflet/dist/leaflet.css";
import "./styles.css";

import Tabs, { TabPane } from "rc-tabs";
import TabContent from "rc-tabs/lib/TabContent";
import ScrollableInkTabBar from "rc-tabs/lib/ScrollableInkTabBar";
import { Map as LeafMap, TileLayer, Marker, Popup } from "react-leaflet";

export default function App() {
  var callback = function(key) {};

  return (
    <Tabs
      defaultActiveKey="1"
      onChange={callback}
      renderTabBar={() => <ScrollableInkTabBar />}
      renderTabContent={() => <TabContent />}
    >
      <TabPane tab="tab 1" key="1">
        <LeafMap center={[59.95, 30.33]} zoom={11} style={{ height: "100vh" }}>
          <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
          <Marker position={[59.95, 30.33]}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </LeafMap>
      </TabPane>
      <TabPane tab="tab 2" key="2">
        second
      </TabPane>
      <TabPane tab="tab 3" key="3">
        third
      </TabPane>
    </Tabs>
  );
}

演示

推荐阅读