不同标记的重复点击事件监听器：谷歌地图

Question

简介

我正在使用谷歌地图，显示具有不同 infoWindow 的标记。我正在进行 ajax 调用以使用相关信息窗口更新地图标记。成功调用 ajax 后，调用地图渲染函数并“正确”更新地图。

问题 ajax 调用后，地图更新，但问题是每个标记都有相同的重复信息窗口。也就是说，infowindow 没有分别与标记绑定。

Javascript 代码

我确定问题出在 clickEventListener 上。评论仅供参考。

//map rendering start
                function renderMap(dd) {
                    console.log('after ', dd);
                    for (var a = 0; a < dd; a++) {
                        console.log('after ', dd);
                    }
                    var dataArr = [];
                    var mapProp = {
                        center: abc,
                        zoom: 12,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

                    for (var a = 0; a < dd.length; a++) {
                        dataArr.push({ location: new google.maps.LatLng(dd.location.coordinates[1], dd.location.coordinates[0]), weight: 2 });
                        var contentString = dd;
                        var infowindow = new google.maps.InfoWindow({
                            content: contentString
                        });

                        var marker = new google.maps.Marker({
                            position: { lat: dd.location.coordinates[1], lng: dd.location.coordinates[0] },
                            label: "B",
                            map: map
                        });
                        console.log("before event listener", contentString);//Correctly displayed
                        google.maps.event.addListener(marker, 'click', function () {
                            //when click on marker, console is logged
                            console.log("after event listener", contentString);//Wrongly log same contentString
                            infowindow.open(map.get('map'), marker);
                        });

                            // Add circle overlay and bind to marker
                          var circle = new google.maps.Circle({
                                map: map,
                                radius: 5000,    // 10 miles in metres
                                fillColor: '#4682b4'
                            });

                        circle.bindTo('center', marker, 'position');
                        //console.log(e.location] + ',' + e.location.coordinates[0]);

                        //start of inner for
                    }
                    var heatmap = new google.maps.visualization.HeatmapLayer({
                        data: dataArr
                    });
                }
                //map rendering end
                function ajaxHeatMapHandler() {
                    var dataEl = $('#heatmapFilterArea');

                    var data = {};

                    //make ajax resquest
                    $.ajax({
                        type: "POST",
                        url: "/",
                        data: data,
                        success: function (response, status) {
                            heatmapTitle.text(responselength + ' entries');
                            renderMap(response);
                        },
                    });

                }

我正在尝试找出问题所在，现在求助于 SO，如果有人对此问题有想法或知识，请提供帮助。感谢您的宝贵时间。

Answer 1

查看 Leigh here 的精彩回答

问题在于您创建信息窗口的方式，而不是我认为的事件处理程序。