带有多个标记的 google api v3 信息窗口不起作用答案

【问题标题】：google api v3 infowindow with multiple markers doesn't work带有多个标记的 google api v3 信息窗口不起作用
【发布时间】：2015-05-03 23:59:51
【问题描述】：

我正在尝试在 infowindow 内容上写下我的循环的记录号。
结果是我读取了每个信息窗口的最后一个记录号 (10)，而不是 1,2,3...10
有人可以帮助我吗？提前感谢
代码是这样的：

    function generaMappaMulti() {

        var CoordinataIniziale = new google.maps.LatLng(44.714957, 10.733647);   //set initial coordinate
        var opzioni = { center: CoordinataIniziale, zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP };  //set options to the map


        map = new google.maps.Map(document.getElementById("canvas_mappa"), opzioni);

        [...]

        for (var i = 0; i < 10; i += 1) {     //for each row...

            var Coordinate = new google.maps.LatLng(ObjLat, ObjLon);  

            marker = new google.maps.Marker({ position: Coordinate, map: map});   //add a marker to the map

            var infowindow = new google.maps.InfoWindow({
                content: i.toString()   //here is where i'm trying to write record number on the infowindows
            });


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


        }

    }
    google.maps.event.addDomListener(window, 'load', initialize);

【问题讨论】：

标签： google-maps-api-3 infowindow marker

【解决方案1】：

试试这个方法：只创建 1 个信息窗口，并在带有闭包的事件侦听器中使用 setContent() 方法。

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

for (var i = 0; i < 10; i += 1) { //for each row...

    var Coordinate = new google.maps.LatLng(ObjLat, ObjLon);

    var marker = new google.maps.Marker({
        position: Coordinate,
        map: map
    }); //add a marker to the map

    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            infowindow.setContent('Your content goes here');
            infowindow.open(map, marker);
        }
    })(marker, i));
}

下面是一个工作示例。

JSFiddle demo

【讨论】：