javascript - 在谷歌地图API中向多个标记添加标签

Question

我在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 模板，以防它产生影响。

Answer 1

Google map API 中的对象以不同的方式工作，您不能简单地在没有闭包的情况下循环它们并期望它们正常工作。每个标记都需要在其闭包中创建。您只需循环遍历数组并调用 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);
  });

}