Блог

Главная - Вопросы по программированию - Листовка не отображается

Листовка не отображается

#javascript #leaflet

Вопрос:

Я новичок в JavaScript. Листовка на странице не отображает карту, пока я не изменю свойство .leaflet-container { overflow: ;}, вы можете увидеть это на изображении2 . Как я могу это исправить? Спасибо! CSS

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"  />
<style>
    body {
        padding: 0;
        margin: 0;
    }
    html, body, #map {
        height: 100%;
        width: 100%;
    }

HTML

 <div id="map"></div>

JS

 </body>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script>
        var map = L.map.invalidateSize();
        L.tileLayer(
            'https://api.maptiler.com/maps/streets/256/{z}/{x}/{y}.png?key=ekfefkerdkdfk2', 
            {attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">amp;copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">amp;copy; OpenStreetMap contributors</a>'}
        ).addTo(map);
    </script>

изображение 2
изображение 1

Ответ №1:

Заменить var map = L.map.invalidateSize(); на

 var map = L.map('map', {
    center: [51.505, -0.09],
    zoom: 13
});

Если он все еще не работает, проверьте, перезаписаны ли вы div в некоторых ваших классах CSS. Еще создайте образец на https://leafletjs.com/edit

Комментарии:

1. Я изменил var map = L.map.invalidateSize(); Карта появилась в Plunker, но по-прежнему не отображается на моей странице.

2. Затем вы перезаписываете ее с помощью некоторого стиля css. На вкладке «Элементы» инструментов разработчика (F12) вы можете увидеть, какие стили добавлены в контейнер карты

3. @Aliaksei. Статкевич делает пример на codesandbox.io

Метки: