Получение ошибки контейнера карты, не найденного на карте листовки

Мое требование состоит в том, чтобы показать на странице несколько карт листовок (на основе внутренних данных).

map.component.ts

for (var i = 0; i < this.mapleaf.length; i++) {
    map[i] = L.map(this.mapleaf[i]).setView([12.9249, 80.1000], 12); 
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map[i]);
}

map.component.html

<div class="col-xs-12 col-sm-8 col-lg-8" >
  <span *ngFor="let leaflet of mapleaf">      
    <div id ="{{mapleaf}}"></div>
  </span>   
</div>

Я поместил идентификатор карты как Но при выполнении отображается ошибка, так как контейнер карты не найден.

Я новичок в этой карте листовок. Может ли кто-нибудь помочь мне в этом.


javascript leaflet openstreetmap leaflet.markercluster angular-leaflet-directive
person Haritha    schedule 06.01.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я настоятельно рекомендую воспроизвести ошибку, поделившись своим кодом с https://stackblitz.com/, потому что, возможно, есть более одной проблемы.

Однако то, что кажется проблематичным на первый взгляд, заключается в следующем:

<span *ngFor="let leaflet of mapleaf">      
    <div id ="{{mapleaf}}"></div>
</span>

Вы перебираете массив, но каждый раз привязываете весь массив, а не каждый его элемент. Поэтому контейнер карты не соответствует тому, который вы указываете в своем .ts-файле.

Измените его на следующее:

<span *ngFor="let leaflet of mapleaf">      
    <div id ="{{leaflet}}"></div>
</span>
person treecon    schedule 06.01.2021
comment
Я пробовал то, что вы предложили, но снова показывает ту же ошибку, не могли бы вы помочь мне с другим способом работы? - person Haritha; 06.01.2021
comment
пожалуйста, опубликуйте полный код или, что еще лучше, поделитесь с нами stackblitz, чтобы воспроизвести ошибку. - person treecon; 06.01.2021
comment
Он работает с сервером, поэтому не может воспроизвести ошибки во время работы в stackblitz. Мой вопрос заключается в динамическом создании нескольких карт листовок на основе внутренних данных. - person Haritha; 07.01.2021
comment
1) Затем я предполагаю, что при инициализации каждой карты ее контейнер листовок (который создается с помощью *ngFor) еще не существует в DOM. 2) Попробуйте имитировать динамическое создание карт в stackblitz с использованием setTimeout/setInterval. Это действительно помогло бы нам. - person treecon; 07.01.2021