在谷歌地图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可以显示多个标记，这让我感到惊讶，所以我尝试像中那样，随着i的增加，对marker和infowindow进行索引

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

但在这种情况下只显示了一个标记并且没有出现infowindow。这是一个html文件中<script>标记和我使用的jinja2模板之间的代码，以防产生差异。

Answer 1

谷歌地图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);
});
}