Блог

Главная - Вопросы по программированию - Leaflet.js Карта не занимает всю ширину [React.js ]

Leaflet.js Карта не занимает всю ширину [React.js ]

#javascript #css #reactjs #leaflet #react-leaflet

#javascript #css #reactjs #брошюра #реагировать-листовка

Вопрос:

У меня есть leaflet.js Карта, которая не отображается во всю высоту внутри div или во всю ширину, даже при 100% полной высоте, объявленной в CSS. Код и видео приведены ниже.

введите описание изображения здесь

https://codesandbox.io/s/determined-napier-wywxg

Ответ №1:

Укажите ширину и высоту, равные 100% вашему родительскому div MapContainer , и прослушайте whenCreated событие prop MapContainer . Там используется map.invalidateSize в сочетании с setInterval событием

  <LeafletMap  center={[34.80746, -40.4796 ]} zoom={3} 
              whenCreated={map => setInterval(() =>{ map.invalidateSize()}, 100)}
              style={{width: '100%', height: '100%'}}>
              <TileLayer 
               url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
               attribution='amp;copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              />
  </LeafletMap>

ДЕМОНСТРАЦИЯ

Метки: