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，就像在< / p>

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

，但在这种情况下，仅显示一个标记，而没有出现infowindow。这是html文件中<script>标记之间的代码，我使用jinja2模板以防万一。

Answer 1

google maps api中的对象以不同的方式工作，如果没有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);
  });

}

将标签添加到Google Map API的多个标记中

1 个答案: