如何在for循环中创建多个标记信息窗口(How to Create InfoWindows for

2019-06-28 02:57发布

我有以下的代码并正确创建所有,我存储标记但后来当我点击其中任何一个只创建了最后信息窗口,它只会出现在最后一个标记,不管我点击该标记。 我可以想象这已是如此,在我的for循环使用相同的变量存在。

{% for record in records %}

//need to do the JSON encoding because JavaScript can't have Jinja2 variables
//I need the safe here because Jinja2 tries to escape the characters otherwise
var GPSlocation = {{record.GPSlocation|json_encode|safe}};  
var LatLng = GPSlocation.replace("(", "").replace(")", "").split(", ")
var Lat = parseFloat(LatLng[0]);
var Lng = parseFloat(LatLng[1]);

var markerLatlng = new google.maps.LatLng(Lat, Lng);

var marker = new google.maps.Marker({
    position: markerLatlng,
    title: {{record.title|json_encode|safe}}
});

var infowindow = new google.maps.InfoWindow({
    content: "holding..."
    });

google.maps.event.addListener(marker, 'click', function () {
    infowindow.setContent({{record.description|json_encode|safe}});
    infowindow.open(map, marker);
    });

//add the marker to the map
marker.setMap(map);

{% endfor %}

我试图改变事件监听器这样的:

google.maps.event.addListener(marker, 'click', function () {
        infowindow.setContent({{record.description|json_encode|safe}});
        infowindow.open(map, this);
        });

当我看到,工作了一段其他用户左右,但随后没有信息窗口显示出来。 是否有任何明显的错误吗?

Answer 1:

您需要创建一个单独的功能标记:

   // Global var
   var infowindow = new google.maps.InfoWindow();

然后,在循环中:

    var markerLatlng = new google.maps.LatLng(Lat, Lng);
    var title = {{record.title|json_encode|safe}}
    var iwContent = {{record.description|json_encode|safe}}
    createMarker(markerLatlng ,title,iwContent);

最后:

    function createMarker(latlon,title,iwContent) {
      var marker = new google.maps.Marker({
          position: latlon,
          title: title,
          map: map
    });


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

    }

说明在这里。



文章来源: How to Create InfoWindows for Multiple Markers in a For loop