Листовка React - TileLayer не отображается при первой загрузке
Я впервые использую React-Leaflet. Я делаю то же самое, что показано в документации, но карта отображается серым цветом при первой загрузке страницы. Однако, если бы я изменил размер браузера, карта отображалась правильно и отображала карту.
index.js
<link
rel = "stylesheet"
href = "https://unpkg.com/[email protected]/dist/leaflet.css"
integrity = "sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A= = "
crossorigin = ""
/>
пакет.json
"react-leaflet": "^3.0.2",
"leaflet": "^1.7.1",
css-файл
.leaflet-container {
height: 310px;
width: 440px;
margin: 0 auto;
}
мой компонент
import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
const Location = () => {
return (
<div className = "location-container">
<MapContainer
style = {{ height: "310px" }}
center = {[51.505, -0.09]}
zoom = {15}
scrollWheelZoom = {false}
>
<TileLayer
attribution='© <a href = "http://osm.org/copyright">OpenStreetMap</a> contributors'
url = "http://{s}.tile.osm.org/{z}/{x}/{y}.png"
/>
<Marker position = {[51.505, -0.09]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
</div>
);
};
export default Location;
я добавил leaflet-css в свой index.js, я добавил ширину и высоту в свой DOM листовки. Я заметил, что при первой загрузке картинки не приходят из апи, но когда я изменяю размер браузера, картинки приходят. Вот несколько фотографий.
первый загруженный
после изменения размера браузера
Я не смог найти способ добавить map.invalidateSize() в свой компонент
ты пробовал componentDidMount() { const map = this.mapRef.current.leafletElement; setTimeout(() => { map.invalidateSize(); }, 250); } ?
да, я пытался. Но я думаю, что не смог правильно установить mapRef. Я использую хук useRef. const ref = useRef(); и затем добавьте ссылку на <div ref = {ref} className = "location-container"></div>. useEffect(() => { const map = ref.current.leafletElement; setTimeout(() => {map.invalidateSize(); }, 250); }, []); но выдает ошибку и говорит, что invalidateSize не является функцией
Хорошо, тогда я не могу вам помочь, потому что я не программист, извините
Скорее всего, ref должен быть установлен в элементе <MapContainer>, а не в его оболочке div.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я понял это сам. Пишу если кто сталкивался с такой же проблемой.
Я просмотрел документацию буклета по реакции и нашел это в разделе, посвященном хукам реакции. Я добавил useMap для доступа к функциям карты в React-листовке.
import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet";
Затем я создал новый компонент на той же странице.
const ResizeMap = () => {
const map = useMap();
map._onResize();
return null;
};
Здесь я вызвал метод _onResize. Таким образом, когда страница загружается впервые, она изменяет размер карты, и изображения загружаются правильно. В других проектах они решили это с помощью map.invalidateSize();
Здесь я использовал компонент изменения размера. Он должен быть внутри MapContainer.
<MapContainer
style = {{ height: "310px" }}
center = {[51.505, -0.09]}
zoom = {15}
scrollWheelZoom = {false}
>
<ResizeMap />
<TileLayer
attribution='© <a href = "http://osm.org/copyright">OpenStreetMap</a> contributors'
url = "http://{s}.tile.osm.org/{z}/{x}/{y}.png"
/>
<Marker position = {[51.505, -0.09]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
Отвечает ли это на ваш вопрос? Карта не видна при инициализации с помощью react-leaflet