Leaflet. js TypeError: t не определено с несколькими картами

Question

Я пытаюсь отобразить три карты на одной странице с листовкой. js и API mapquests. Я создал jQuery for-loop для чтения уникального почтового индекса, затем преобразовал его (с помощью mapquest) в широту и долготу и, наконец, создал три карты и добавил соответствующие широту и долготу на каждую карту. В результате на одной странице будут отображаться три разные карты.

Я добился этого с помощью приведенного ниже кода. У каждой «карты» есть свой номер карты (от 1 до 3), почтовый индекс и соответствующий идентификатор карты и карты.

Изменить Я также получаю эту jQuery ошибку:

jQuery.Deferred exception: t is undefined addTo@https://unpkg.com/leaflet@1.6.0/dist/leaflet.js:5:64070
MYWEBSITEURL/map.js:38:6
e@https://code.jquery.com/jquery-3.5.1.min.js:2:30005
l/</t<@https://code.jquery.com/jquery-3.5.1.min.js:2:30307
 undefined

Проблема, с которой я столкнулся, заключается в том, что при запуске моего jQuery я получаю эту консольную ошибку: TypeError: t is undefined. Я сузил его до того, что он имеет какое-то отношение к функциям L.tileLayer() и / или L.circle(). Я добавил на страницу последний jQuery и буклет. js.

Изменить После ответа @ivansanchez вопрос был изменен, но все те же проблемы.

Изменить Изменил leaflet.js на leaflet-sr.js, и теперь я получаю сообщение об ошибке: TypeError: map is undefined

карта. js:

$(document).ready(function(){

var postalCodes = [];
var latLng      = [];
var lat         = [];
var lng         = [];
var maps        = [];

for(var n = 0; n < 3; n++) {

    console.log('Maps for-loop count: '+n);

    postalCodes.push($('.card'+[n]+' .card__info--postal > span').html());

    $.ajax({ // Get lat & long from postal code
        async: false,
        url: 'https://www.mapquestapi.com/geocoding/v1/address?key=MYAPIKEY&postalCode='+postalCodes[n]+'&country=finland',
        success: function(obj) {
            latLng[n] = obj.results[0].locations[0].latLng;
            lat[n]    = latLng[n].lat;
            lng[n]    = latLng[n].lng;
        },
        error: function(xhr) {
            console.log('Map error', xhr);
        }
    });

    console.log(latLng[n], lat[n], lng[n]);

    var map = L.map('mapid'+[n]).setView([lat[n], lng[n]], 13);

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        maxZoom: 18,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken: 'MYAPIKEY'
    }).addTo(maps[n]);

    L.circle([lat[n], lng[n]], { // Map out area of the postal code
        color: 'rgb(218, 65, 103)',
        fillColor: 'rgb(218, 65, 103)',
        fillOpacity: 0.5,
        radius: 500
    }).addTo(maps[n]);

    maps.push(map);
}
});

Answer 1

Вы делаете ...

 var maps = [ L.map('mapid'+[n]).setView([lat[n], lng[n]], 13) ]; // Creates three maps, that corresponds with three mapids in my HTML

... и это не делает то, что вы думаете. Вы создаете массив из одного элемента и назначаете его maps, и вы делаете это три раза. Следовательно, на втором проходе l oop, когда код ссылается на maps[1], он имеет значение undefined.

Вместо этого вы, вероятно, захотите сделать что-то вроде ...

var maps = [];
for(var n = 0; n < 3; n++) {
   /* stuff */
   maps.push( L.map( /*stuff*/ ) );
   L.tileLayer( /* stuff */ ).addTo(maps[n]);
}

... или даже ...

var maps = [];
for(var n = 0; n < 3; n++) {
   /* stuff */
   var map = L.map( /*stuff*/ );
   L.tileLayer( /* stuff */ ).addTo(map);
   maps.push(map);
}

С другой стороны, у вас есть старое добро состояние гонки относительно значений latLng[n] , lat[n] и lng[n]. Поскольку эти значения устанавливаются только после завершения сетевой операции (поскольку AJAX - это asyn c, et c et c), они (наиболее вероятно) undefined при использовании. Возможно, вам захочется отложить добавление данных на каждую карту до тех пор, пока вы не получите указанные данные, например, например,

var maps = [];
for(var n = 0; n < 3; n++) {
   var map = L.map( /*stuff*/ );
   fetch(url)
     .then(function(response){return response.json})
     .then(function(json)){
       L.circle(json.results[0].locations[0]).addTo(map);
     });
   L.tileLayer( /* stuff */ ).addTo(map);
   maps.push(map);
}

Обратите внимание, что последовательность событий здесь следующая: сетевой запрос инициирован , map создается, создается экземпляр tilelayer, сетевой запрос завершается, создается круг.

(И почему да, я предпочитаю API извлечения вместо jQuery в любой день) 1032 *

Помните, что в Leaflet обычно приятно заменить leaflet.js на leaflet-src.js, чтобы улучшить трассировку стека, и что использование инструментов разработчика браузера для установки точек останова перед исключениями позволит вам увидеть, какие значения undefined в то время.

Answer 2

Измените свой код на:

maps[n] = L.map('mapid'+[n]).setView([lat[n], lng[n]], 13);