信息窗口不显示

Question

尽管这个问题已经在Stackoverflow上被问了很多次，但我还没能实现一个有效的问题解决方案。

我为每个与位置相关联的参数创建一个数组。我的意图是将这些变量声明为全局变量。

var locationid = []
var latitude = []
var longitude = []
var observationdate = []

然后，我循环遍历一个datadumpdictionary对象，该对象在数据库中为地图上的每个位置创建一行，列中的值是经度、纬度等参数的值。

{% for data in datadump %}
locationid.push('{{data.locationid}}');       
latitude.push('{{data.latitude}}');
longitude.push('{{data.longitude}}');
observationdate.push('{{data.observationdate}}');
{% endfor %}

接下来，我循环浏览数据库，在每个位置创建一个标记，并为所有位置创建带有.svg静态文件的图标。

{% for data in datadump %}
var latLng = new google.maps.LatLng('{{data.latitude}}','{{data.longitude}}');
var icon = {
url: "{% static 'darkskymap/img/rocket-15.svg' %}", // url
scaledSize: new google.maps.Size(20, 20), // scaled size
};

marker = new google.maps.Marker({
position: latLng,
map: map,
title: '{{data.locationid}}',
label: '{{data.observationdate}}',
icon: icon
});
{% endfor %}

然后我声明一个infowindow变量，并为它分配一个文本内容。

var infowindow = new google.maps.InfoWindow({
content: 'Site Observation'
});    

在最后一步中，我添加了一个点击监听器函数，当用户点击标记时，该函数将打开信息窗口。

marker.addListener('click', function() {
infowindow.open(map, marker);
});

上面的代码生成标记，但不显示任何信息窗口。我曾尝试在for循环中替换Infowindow、addListener属性和open方法的变量声明，但这只会生成一个信息窗口，即循环中的最后一个元素，而不会生成其他元素。所以我把它们从循环中分离出来，以实现循环闭合，但这并不能解决问题。我哪里错了？

Answer 1

在模板中，确保infowindow和infowindow事件侦听器位于与定义标记的for循环相同的for循环中。此外，为了代码清晰和跟踪标记，将forloop.counter添加到每个latLng、marker、icon和infowindow，以便对它们进行编号。

这是供参考的代码。

{% for data in datadump %}
// latLng for the marker
var latLng{{forloop.counter}} = new google.maps.LatLng('{{data.latitude}}','{{data.longitude}}');
// icon for marker.
var icon{{forloop.counter}} = {
url: "{% static 'darkskymap/img/rocket-15.svg' %}", // url
scaledSize: new google.maps.Size(20, 20), // scaled size
};
// add the marker.
marker{{forloop.counter}} = new google.maps.Marker({
position: latLng{{forloop.counter}},
map: map,
title: '{{data.locationid}}',
label: '{{data.observationdate}}',
icon: icon{{forloop.counter}}
});
// create the infowindow for the marker.
var infowindow{{forloop.counter}} = new google.maps.InfoWindow({
content: 'Site Observation'
});  
// add event listener to open infowindow for the marker.
marker{{forloop.counter}}.addListener('click', function() {
infowindow{{forloop.counter}}.open(map, marker{{forloop.counter}});
});    
{% endfor %}

Answer 2

您应该使用以下内容：

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
})

这是将事件添加到标记的正确方式。我还注意到，你正在循环创建多个标记，假设它们都有一个信息窗口。您需要跟踪它们，并将信息窗口与它们的标记关联起来。