Добавление маркера листовки с вложенным массивом, получение неперехваченной ошибки типа: не удается прочитать свойство 'lat' с нулевым значением

#javascript #leaflet

#javascript #листовка

Вопрос:

Я знаю, что это распространенная ошибка, но я не вижу своей конкретной проблемы. Выполняем небольшую базовую практику JS и сталкиваемся с этой ошибкой только при использовании вложенного массива пар координат. Если я попытаюсь отобразить только одно местоположение, ошибка исчезнет. Есть мысли о том, почему это может происходить? Код ниже.

     var options = {
      center: [39.8333,-98.5833],
      zoom: 4
    }
    // instantiate the leaflet object
    var map = L.map('map', options);

    // Get basemap URL from Leaflet Providers
    var basemap_url = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}'

    // Get basemap attributes from Leaflet Providers
    var basemap_attributes = {
      attribution: 'Tiles amp;copy; Esri amp;mdash; Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'
    }

    // Add tileset as a layer in our map by passing as arguments to  tileLayer method
    var tiles = L.tileLayer(basemap_url, basemap_attributes);

    // add tiles to map with addLayer method
    map.addLayer(tiles);

    // variable to hold string value of cities
    var cities = ["Victoria", "Bettles", "Truth or Consequences"];
    var cityCoords = [
    [48.430077, -123.353043],
    [66.905857, -151.533330],
    [33.1284, -107.25283]
  ];
    var cityPops = [92141, 13, 5948];
    var cityCapitals = [true, false, false];

    // loop through all the elements in the cities array
    for(let i = 0; i <= cities.length; i  ){
      let cityName = cities[i];
      let cityPop = cityPops[i];
      let cityCap = cityCapitals[i];
      let namePop = `<b>${cityName}</b><br> population: <b>${cityPop}</b><br>`;
     
      let popup = `${cityName} population: ${cityPop}`
      console.log(popup)

      if (cityCap == true) {
        popup  = 'is a capital city'}

      L.marker(cityCoords).addTo(map)
        .bindPopup(popup);
    }

1. попробуйте L.marker(cityCoords[i]) передать запись в массиве координат в marker

2. @traktor53 — это сработало. Это захватывает все массивы, которые распознаются в цикле. Спасибо!

3. Что с параллельными массивами? Почему бы и нет var cities = [{name: "Victoria", coords: [48.430077, -123.353043], population: 92141, capital: true}, // etc...]

4. Для приложений отображения меня научили использовать вложенные массивы.

Ответ №1:

Как прокомментировано, замена

    L.marker(cityCoords).addTo(map)

    L.marker(cityCoords[i]).addTo(map)

решает проблему путем передачи LatLng массива чисел в marker , как описано в документации.

Я делаю вывод, что листовка преобразует массив массивов в null , если массив должен был содержать числовые значения координат, а затем генерирует ошибки при попытке получить доступ к lat или lng свойствам того, что должно было быть действительным результатом преобразования.