Добавление метки к нескольким маркерам в API карты Google - PullRequest
Новая
       35

Добавление метки к нескольким маркерам в API карты Google

0 голосов
/ 15 декабря 2018

У меня есть несколько значений долготы, широты в stores[][5] и stores[][6], которые были переданы из python в javascript, и соответствующая информация метки для этой долготы / широты в stores[][1].Чтобы показать несколько маркеров, которые имеют свою собственную метку, я зациклил код, как показано ниже.Он успешно показал несколько маркеров, но только один маркер имел метку.

    function initMap() {
    var uluru = {lat: -25.363, lng: 131.044};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: uluru
    });


    {% for store in stores %}
    var contentString = '{{store[1]}}';
    var infowindow = new google.maps.InfoWindow({
      content: contentString
    });
      marker = new google.maps.Marker({
      position: {lat: {{store[5]}}, lng: {{store[6]}}}, 
      map: map,
      title: 'Uluru (Ayers Rock)'
    });
    marker.addListener('click', function() {
      infowindow.open(map, marker);
    });
    count = count + 1;
    {% endfor %}

Поскольку с самого начала мне показалось удивительным, что одна и та же переменная имени marker может отображать несколько маркеров, я попытался индексировать marker и infowindow с увеличением i, как в 

    marker[i] = new google.maps.Marker({...
    ...
    var infowindow[i] = new google.maps.InfoWindow({...

но в этом случае был показан только один маркер и infowindow не появился.Это код между тегом <script> в html-файле, и я использую шаблон jinja2 на случай, если что-то изменится.

1 Ответ

0 голосов
/ 16 декабря 2018

Объекты в API Google Maps работают по-другому, и вы не можете просто пройти через них без closures и ожидать, что они будут работать должным образом.Каждый маркер должен быть создан в его закрытии.Вам просто нужно перебрать ваш массив и вызвать функцию createMarkers.Проверьте код ниже 

function initMap() {
  var uluru = {
    lat: -25.363,
    lng: 131.044
  };
  var uluru2 = {
    lat: -26.363,
    lng: 139.044
  };
  var contentString = '<div id="content">1</div>';
  var contentString2 = '<div id="content">2</div>';
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  createMarkers(map, uluru, contentString);
  createMarkers(map, uluru2, contentString2);
}

function createMarkers(map, coords, CS) {
  var infowindow = new google.maps.InfoWindow({
    content: CS
  });
  var marker = new google.maps.Marker({
    position: coords,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });

}
...