英文:
React-leaflet don't show correctly in Modal
问题
大家好！我尝试在我的React项目中使用react-leaflet，并采用Materialize样式。当我打开模态组件时，我看不到地图。我已经安装了npm install react-leaflet，还在index.html中添加了以下链接：
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
请帮助我解决这个问题。
英文:
everyone! I try to use react-leaflet in my React Project with Materialize style. When i open Modal component i don't see map. I installed npm install react-leaflet, also added in index.html <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
import React, { useEffect, useRef } from "react";
import PropTypes from "prop-types";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
export const MapModal = ({ lnglat }) => {
const mapRef = useRef(null);
useEffect(() => {
// Clean up the map instance when the modal is closed
return () => {
if (mapRef.current) {
mapRef.current.remove();
}
};
}, []);
return (
<div id='MapModal' className='modal'>
<div className='modal-content'>
<MapContainer
center={[48.0196, 66.9237]}
zoom={5}
style={{ height: "50vh", width: "100%" }}
ref={mapRef}
>
<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={lnglat}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
</div>
</div>
);
};
MapModal.propTypes = {
lnglat: PropTypes.array,
};
Help me please how to solve the problem?
答案1
得分: 1
Add this to imports import 'leaflet/dist/leaflet.css'; 我遇到了同样的问题，这个解决了它。
英文:
Add this to imports import 'leaflet/dist/leaflet.css'; I had the same problem and this fixed it.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论