Question

尽管已多次在Stackoverflow上提出此问题，但我仍无法为我的问题实施可行的解决方案。

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

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

然后，我遍历数据转储字典对象，该对象在数据库中为地图上的每个位置创建一行，列中的值是诸如经度，纬度等参数的值。

        {% 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方法，但是只生成一个infowindow，即循环中的最后一个元素，而不生成其他元素。所以我将它们从循环中分离出来以实现循环闭合，但这并不能解决问题。我要去哪里错了？

Answer 1

您应该改用它：

ConfigurableEnvironment

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

Answer 2

在模板中，请确保您的infowindow和infowindow事件侦听器与用于定义标记的事件侦听器位于相同的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 %}

信息窗口不显示

2 个答案: