Javascript 不同标记的重复单击事件侦听器：google maps

导言

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

问题 在ajax调用之后，map会更新，但问题是每个标记都有相同的重复信息窗口。换句话说，infowindow不分别与标记绑定

Javascript代码

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

//开始贴图渲染
函数renderMap（dd）{
console.log（'after'，dd）；
对于（var a=0；a

---

我正在试图找出哪里出了问题，现在转向了这个问题，如果有人对这个问题有想法或知识，请帮忙。谢谢您的时间。

请查看Leigh的精彩答案

---

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

您确定每次调用AJAX后都要重新生成映射吗？@LinShihHao感谢您的回复，是的，我正在考虑其他选项，我认为问题不在于事件处理程序，而在于如何创建信息窗口。希望这能有所帮助我们鼓励下层选民说出原因。这样我可以改进这个问题。@LinShihHao谢谢你的提示，这确实解决了问题，我已经在这个问题上遇到了困难，但没有给予足够的重视。您可以将其作为答案发布，也可以将其标记为重复。而不是李

//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);
                        },
                    });

                }