小编Naf*_*afi的帖子

我试图在我的反应网站上显示示例地图。我已经安装了传单包和反应传单包，然后按照反应传单文档所述进行所有设置。您可以在下面查看我的代码，以获取有关我如何设置它的参考。

 <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="" />

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

。

请任何人帮助我解决可能出现的问题或者我是否缺少任何说明。