Squeak.ru - шаблоны программирования

Как связать каждый маркер с собственным информационным окном?

Как видите, я перебираю объект json, содержащий информацию о маркерах, например:

(Я также использую плагин infobox, но он не имеет отношения к вопросу)

function drawAirports() {
    var markers = [];

    if ( markers != undefined) {
        for (var i = 0; i < markers.length; i++ ) {
            markers[i].setMap(null);
        }
        markers.length = 0;
    }

    var json = [
        {"id":8585885,"airport":"airport name", "lat" : "1.3", "long" : "1.33"},
        {"id":8585886,"airport":"airport name 1", "lat" : "-1.3", "long" : "1.33"},
        {"id":8585886,"airport":"airport name 2", "lat" : "42.5000", "long" : "1.5000"},
        {"id":8585886,"airport":"airport name 3", "lat" : "24.0000", "long" : "54.0000"},
        {"id":8585886,"airport":"airport name 4", "lat" : "17.0500", "long" : "-61.8000"},
        {"id":8585886,"airport":"airport name 5", "lat" : "18.2500", "long" : "-63.1667"},
        {"id":8585886,"airport":"airport name 6", "lat" : "24.0000", "long" : "54.0000"},
        {"id":8585886,"airport":"airport name 7", "lat" : "41.0000", "long" : "20.0000"},
        {"id":8585886,"airport":"airport name 8", "lat" : "40.0000", "long" : "45.0000"},
        {"id":8585886,"airport":"airport name 9", "lat" : "12.2500", "long" : "-68.7500"},
        {"id":8585886,"airport":"airport name 10", "lat" : "-12.5000", "long" : "18.5000"},
        {"id":8585886,"airport":"airport name 11", "lat" : "35.0000", "long" : "105.0000"},
        {"id":8585886,"airport":"airport name 12", "lat" : "-90.0000", "long" : "0.0000"},
        {"id":8585886,"airport":"airport name 13", "lat" : "34.0000", "long" : "-64.0000"},
        {"id":8585886,"airport":"airport name 14", "lat" : "-14.3333", "long" : "-170.0000"},
        {"id":8585886,"airport":"airport name 15", "lat" : "47.3333", "long" : "13.3333"},
        {"id":8585886,"airport":"airport name 16", "lat" : "-27.0000", "long" : "133.0000"},
        {"id":8585886,"airport":"airport name 17", "lat" : "12.5000", "long" : "-69.9667"}
    ];

    var airports = eval(json);

    for (var i = 0; i < airports.length; i++) {

        var airport = airports[i];

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(airport.lat, airport.long),
            map: map,
            title: airport.airport,
            icon: 'img/gmaps/marker.png',
            visible: true
        });

        infobox = new InfoBox({
             content: '<h3>'+airport.airport+'</h3><a class="info" href="">Información</a><a class="bags" href="">Equipajes</a>',
             disableAutoPan: false,
             maxWidth: 150,
             pixelOffset: new google.maps.Size(-212, -150),
             zIndex: null,
             boxStyle: {
                width: "280px"
            },
            closeBoxMargin: "0",
            closeBoxURL: "img/gmaps/close.png",
            infoBoxClearance: new google.maps.Size(1, 1)
        });

        google.maps.event.addListener(marker, 'click', function() {
            infobox.open(map, this);
            map.panTo(loc);
        });

        markers.push(marker);                       
    }
}

Моя проблема в том, что каждый маркер открывает последнее (номер 17) информационное окно,

Что я делаю не так?


Ответы:


1

Таким образом, ваша проблема не в использовании Google Maps API или библиотеке, а в том, как вы используете замыкания. У вас есть глобальная переменная infobox, и это нормально, поскольку вам нужен только один информационный блок и вы закрываете любой информационный блок, присутствующий на карте, перед открытием нового, но то, как он у вас есть, infobox всегда указывает на последний созданный, который имеет номер 17, последнее местоположение . Просто используйте закрытие Javascript и создайте информационное поле внутри кода прослушивателя, используя тот факт, что airport всегда содержит правильные данные из-за закрытия. Это должно работать:

function drawAirports() {
  var markers = [];
  var infobox = new InfoBox({
      content: '',
      disableAutoPan: false,
      maxWidth: 150,
      pixelOffset: new google.maps.Size(-212, -150),
      zIndex: null,
      boxStyle: {
          width: "280px"
      },
      closeBoxMargin: "0",
      closeBoxURL: "img/gmaps/close.png",
      infoBoxClearance: new google.maps.Size(1, 1)
  });

  if (markers != undefined) {
      for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(null);
      }
      markers.length = 0;
  }

  var json = [
      {"id": 8585885, "airport": "airport name", "lat": "1.3", "long": "1.33"},
      {"id": 8585886, "airport": "airport name 1", "lat": "-1.3", "long": "1.33"},
      {"id": 8585886, "airport": "airport name 2", "lat": "42.5000", "long": "1.5000"},
      {"id": 8585886, "airport": "airport name 3", "lat": "24.0000", "long": "54.0000"},
      {"id": 8585886, "airport": "airport name 4", "lat": "17.0500", "long": "-61.8000"},
      {"id": 8585886, "airport": "airport name 5", "lat": "18.2500", "long": "-63.1667"},
      {"id": 8585886, "airport": "airport name 6", "lat": "24.0000", "long": "54.0000"},
      {"id": 8585886, "airport": "airport name 7", "lat": "41.0000", "long": "20.0000"},
      {"id": 8585886, "airport": "airport name 8", "lat": "40.0000", "long": "45.0000"},
      {"id": 8585886, "airport": "airport name 9", "lat": "12.2500", "long": "-68.7500"},
      {"id": 8585886, "airport": "airport name 10", "lat": "-12.5000", "long": "18.5000"},
      {"id": 8585886, "airport": "airport name 11", "lat": "35.0000", "long": "105.0000"},
      {"id": 8585886, "airport": "airport name 12", "lat": "-90.0000", "long": "0.0000"},
      {"id": 8585886, "airport": "airport name 13", "lat": "34.0000", "long": "-64.0000"},
      {"id": 8585886, "airport": "airport name 14", "lat": "-14.3333", "long": "-170.0000"},
      {"id": 8585886, "airport": "airport name 15", "lat": "47.3333", "long": "13.3333"},
      {"id": 8585886, "airport": "airport name 16", "lat": "-27.0000", "long": "133.0000"},
      {"id": 8585886, "airport": "airport name 17", "lat": "12.5000", "long": "-69.9667"}
  ];

  var airports = eval(json);

  for (var i = 0; i < airports.length; i++) {
      (function (airport) {

          var marker = new google.maps.Marker({
              position: new google.maps.LatLng(airport.lat, airport.long),
              map: map,
              title: airport.airport,
              icon: 'img/gmaps/marker.png',
              visible: true
          });

          google.maps.event.addListener(marker, 'click', function () {
              infobox.setContent('<h3>' + airport.airport + '</h3><a class="info" href="">Información</a><a class="bags" href="">Equipajes</a>');
              infobox.open(map, this);
          });

          markers.push(marker);
      })(airports[i]);
  }
}
09.05.2016
  • Если вы хотите узнать больше о замыканиях: w3schools.com/js/js_function_closures.asp 09.05.2016
  • Тем не менее, это, вероятно, не так, как вы должны это делать... Вам лучше создать только один экземпляр InfoBox и использовать метод setContent для обновления содержимого. 09.05.2016
  • @MrUpsidown Я обновил свой ответ в соответствии с вашим предложением, но должен сказать, что есть много других улучшений, которые можно сделать. То же самое с большинством примеров кода здесь, на SO. Я также включил информационный блок в область действия функции, чтобы глобальная область не загрязнялась. Но я все еще думаю, что это действительно мелочно, чтобы уловить некоторые детали и проголосовать против, учитывая, что мой ответ демонстрировал неправильное использование области видимости, а не самый реальный способ достичь того, чего хотел пользователь. 09.05.2016
  • И теперь это лучший ответ. И я удалил свой минус. И я думаю, что это довольно хороший способ подтолкнуть людей к обновлению/улучшению своих ответов ;-) 09.05.2016
  • Кстати. только с одним информационным окном, я не думаю, что вам нужна строка if(infobox) infobox.close();, если она работает так же, как стандартное информационное окно. 09.05.2016
  • @MrUpsidown Метод close() удаляет только слушателей и устанавливает для карты значение null. Так что да, вроде и не нужно. Я проверил локально, и он работает без него. Я обновил ответ, спасибо. 09.05.2016
  • Новые материалы

    Угловая структура архитектуры
    Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..

    «Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
    Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..

    Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
    В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...

    Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
    React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..

    Создайте API с помощью Python FastAPI
    Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..

    Веселье с прокси-сервером JavaScript
    Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..

    Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
    Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...