reactjs React-leaflet图显示了分散的图块

pw136qt2 于 2023-02-08 发布在 React

关注(0)|答案(4)|浏览(155)

我试图在我的react网站上展示一个示例Map。我已经安装了宣传单包，也安装了react-宣传单包，然后按照react-宣传单文件的要求设置了所有内容。你可以看到下面的代码，作为我如何设置它的参考。

<div>
  <h3 className='text-4xl my-4 text-center text-slate-800 font-bold'>Maps and Direction</h3>
  <div className='mx-auto py-2' style={{ width: "80%", height: "100%" }}>
    <MapContainer center={position} zoom={13} scrollWheelZoom={true}>
      <TileLayer attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <Marker position={position}>
        <Popup>
          Website Name
        </Popup>
      </Marker>
    </MapContainer>
  </div>
</div>

我还在index.html中导入了传单css CDN，如下所示，

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin="" />

我还设置了Map容器的定义高度和宽度，正如你在我的代码中看到的，但是它显示了Map的一些分散的部分，如下图所示。

.
请任何人都可以帮助我什么可能是问题或如果我错过了任何指示。

reactjs

来源：https://stackoverflow.com/questions/72154665/react-leaflet-map-shows-scattered-blocks-of-maps

4条答案

按热度按时间

zf9nrax11#

我设法使它工作不知何故。我只是添加了下面的CSS代码在app.css文件。

.leaflet-container {
width: 100%;
height: 60vh;
}

但是我不明白为什么我需要添加这个。.leaflet-container是不是像一个内置的容器一样用于放置传单Map？

赞(0）回复(0）举报 2023-02-08

n53p2ov02#

尝试在导入部分导入此行
导入“小册子/文件夹/小册子. css”

赞(0）回复(0）举报 2023-02-08

omhiaaxx3#

$ npm i leaflet leaflet-defaulticon-compatibility leaflet-geosearch react-leaflet
然后添加

import { MapContainer, TileLayer,Marker,Popup } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'
import "leaflet-defaulticon-compatibility";

赞(0）回复(0）举报 2023-02-08

uinbv5nw4#

添加leaflet.css，它将修复（节点_模块/leaflet/dist/leaflet. css）

赞(0）回复(0）举报 2023-02-08