将动态 infoWindow 设置为动态标记的 onclick 函数

Question

我正在尝试将动态信息窗口设置为动态标记的 onclick 功能，但我似乎无法让它工作。

目前发生的情况是，当我单击其中一个标记时，它会在它们两个上显示相同的数据。我可以理解这里的问题是我的变量“i”总是相同的，这就是为什么我总是做 i-2，但我似乎不太明白为什么这个值总是变量的最后一个值而不是假定迭代中的当前迭代。

这是处理标记和信息窗口的代码：

function doMarkers() {
    $.ajax({
        url: "/resources/scripts/php/conn/ajax/getEmployeeMap.php",
        type: "GET",
        dataType: 'json',
        cache: false,
        success: function (response) {
            clearMarkers();
            var data = response;
            var i = 1;
            while (i <= Object.keys(data).length) {
                geocoder.geocode({'address': data[i]}, function (results, status) {
                    if (status == 'OK') {
                        var geomarker = results[0].geometry.location;
                        var marker = new google.maps.Marker({
                            position: geomarker
                        });
                        marker.setMap(map);

                        var infoContent = '<p>Address: </p>' + data[i - 2];
                        console.log(data[i - 2]);

                        var infoWindow = new google.maps.InfoWindow({
                            content: infoContent
                        });

                        infoWindows.push(infoWindow);


                        marker.addListener('click', function () {
                            infoWindows[i -2].open(map, marker);
                        });

                        console.log(markers.length);
                        markers.push(marker);
                    }
                });
                i++;
            }
        }
    });
}

Answer 1

也许可以这样尝试：

function doMarkers() {
    $.ajax({
        url: "/resources/scripts/php/conn/ajax/getEmployeeMap.php",
        type: "GET",
        dataType: 'json',
        cache: false,
        success: function(response) {
            clearMarkers();
            var data = response;
            var i = 1;
            while (i <= Object.keys(data).length) {
                geocoder.geocode({
                    'address': data[i]
                }, function(results, status) {
                    if (status == 'OK') {
                        var geomarker = results[0].geometry.location;
                        var marker = new google.maps.Marker({
                            position: geomarker
                        });
                        marker.setMap(map);

                        var infoContent = '<p>Address: </p>' + data[i - 2];
                        console.log(data[i - 2]);

                        var infoWindow = new google.maps.InfoWindow({
                            content: infoContent
                        });

                        marker.addListener('click', function() {
                            infoWindow.open(map, marker); //directly add the event to the info window
                        });

                        infoWindows.push(infoWindow); //add it after adding your event

                        console.log(markers.length);
                        markers.push(marker);
                    }
                });
                i++;
            }
        }
    });
}