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

的好答案

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

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

1 个答案: