Листовка только в одном углу

Question

У меня есть карта листочек, которая только отображается в один угол. Когда я изменяю размер окна браузера, отображается вся карта.

Вот как я invoce карту на

var map = L.map('map', 
{ crs: L.CRS.EPSG3857 } 
).setView([105.2, 100], 6); 

var tiles = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}', { 
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>', 
    subdomains: 'abcd', 
    ext: 'png' 
}).addTo(map); 

И это мой CSS

.myContainer { 
    width: 1024px; 
    height: 800px; 
    position: relative; 
} 

.map { 
    width: 1024px; 
    height: 800px; 
    z-index: 0; 
} 

The map заворачивают в container. Все, что я нашел в Интернете относительно этой проблемы, указывает на относительные размеры в карте или ее родительском контейнере. Тем не менее, у меня есть абсолютные размеры. Я загружаю .css перед .js (где я инициализирую карту). Карта будет отображаться не на начальной странице, а при нажатии на точку подменю.

Почему карта не отображается правильно?

Answer 1

Карта будет отображаться не на начальной странице, а при нажатии на точку подменю.

Вы инициализирует карту на скрытом или нулевой размер контейнера, что делает этот вопрос дубликат 2nd leaflet map not rendering correctly

Ответ тот же: запустить map.invalidateSize() всякий раз, когда карта должна стать видимой, или когда вы меняете его размеры или видимость.