Leaflet - Серые полосы после панорамирования - PullRequest
Новая
       13

Leaflet - Серые полосы после панорамирования

0 голосов
/ 18 мая 2019

РЕДАКТИРОВАТЬ

Этот вопрос , а не Дубликат Как получить холст листовой карты, чтобы иметь высоту 100%? какпо очевидной причине, что вы можете видеть мою карту, покрывающую 100% высоту (сравните атрибуцию на моей картинке, находящейся в серой зоне, в то время как контейнер другого вопроса очевидно заканчивается перед пустой зоной. Также я могу определить размермой контейнер охватывает 100% родительского контейнера в инструментах разработчика. Просто взгляните на мою CSS и очень внимательно посмотрите на картинку и, возможно, на листовку, если вы не знаете, как она работает.)

Оригинал

Я использую буклет 1.5.1 в ионном формате 3.

После небольшого панорамирования карты часто содержимое серых частей не загружается (нетсетевые запросы / трафик указаны в моих инструментах разработчика браузеров), и у меня остались серые части / полосы на карте, как на картинке (серая горизонтальная полоса ниже).

Когда я перемещаюсь намного дальше, недостающие части карты загружаются, но иногда нет (особенно в iOS).

enter image description here

Моя карта page HTML с использованием компонента моей карты (ниже)

<map style="height: 100%; width: 100%;">

Карта компонент HTML

<div id='map'></div>

компонент * scss файл

map {
    #map{
        height:100%;
        width: 100%;
    }
}

А вот машинный набор компонента , который создает карту 

this.map = L.map('map', {
      center: L.LatLng(center.latitude, center.longitude),
      zoom: 13,
      attribution: Attribution,
      tap: false
    });


    //Add OSM Layer
    L.tileLayer("https://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png", { attribution: Attribution }).addTo(this.map);

    this.map.setView([center.latitude, center.longitude], 14);

Есть какие-нибудь намеки на то, что я делаю неправильно?

1 Ответ

0 голосов
/ 26 мая 2019

Решением было инициировать событие изменения размера с помощью window.dispatchEvent(new Event('resize')) каждый раз, когда пользователь входит на вкладку со всеми вкладками, включая вкладку карты.

Карта реагирует на это, приспосабливаясь к "новый "размер.

...