javascript - GooglemapV3 infowindow closeclick 事件未触发

Question

以下代码用于在单击标记时在 Google map 上显示信息窗口。但由于某些原因，信息窗口的“closeclick”事件不起作用。早些时候它虽然可以工作，但由于要求更加复杂，例如 infowindow 对象需要在 Ajax 调用刷新 map 后重新打开。因此， map 会在一分钟后保持刷新，并且要求信息窗口如果在 Ajax 调用时未关闭，则应保持打开状态。

我们还在 map 上绘制折线，并且还在 Google map 上绘制的每个点上打开一个信息窗口，相同的要求也适用于上述信息窗口对象。

        $(".mainDiv").each(function () {
    google.maps.event.trigger(map, 'click');
    if (PlayBackDevices.indexOf(removeSpaces($(this).find(".deviceid").html()).trim()) > -1) {
            var image = new google.maps.MarkerImage($(this).find(".imagepath").html());
            myLatLng = new google.maps.LatLng($(this).find(".latitude").html(), $(this).find(".longitude").html());
            var beachMarker = new MarkerWithLabel({
                position: myLatLng,
                map: map,
                icon: image,
                title: $(this).find(".deviceName").html().trim(),
                labelContent: $(this).find(".deviceName").html().trim()
            });
            markers.push(beachMarker);
            var imgPath = trailImagePath + trailColor.trim() + ".png";
            var beachMarkerTemp = new RichMarker({
                position: myLatLng,
                map: map,
                draggable: false,
                flat: true,
                anchor: RichMarkerPosition.BOTTOM//,
            });
            i = i + 1;
            oms.addListener('click', function (beachMarker) {
                infoWindow.close();
                infoWindowDevicePoints.length = 0;
                if (deviceName.trim() == beachMarker.title.trim()) {
                    $.ajax({
                        type: "Post",
                        url: "/Home/CommonLevel2Information",
                        data: { DeviceId: 101 },
                        async: true,
                        dataType: "html",
                        cache: false,
                        success: function (result) {
                            result = createInfo('', result + '<br/><a href="' + linkToNextLevel + '" title="Click to view DeviceDetail"><%=GlanceWeb.Resources.Level2.Level2.RegMrDtl%>...</a>', deviceId);
                            beachMarker.desc = result;
                            if (result.toString().indexOf("divMainSnap") > 0) {
                                var checkExist = setInterval(function () {
                                    $(".gm-style-iw").css("width", "400px !important;");
                                    infoWindow = new google.maps.InfoWindow({ content: beachMarker.desc, maxWidth: 400 });
                                    infoWindow.open(map, beachMarker);
                                    position = beachMarker.position;// iw.getPosition();
                                    $(".gm-style-iw").each(function () {
                                        if ($(this).find("div.divFirstSnap").length) {
                                            $(this).removeClass("wiThouImage");
                                            $(this).css("max-width", "none");
                                        }
                                    })
                                    clearInterval(checkExist);
                                }, 1000);
                            }
                            else {
                                var checkExist = setInterval(function () {
                                    infoWindow = new google.maps.InfoWindow({ content: beachMarker.desc, maxWidth: 200 });
                                    infoWindow.open(map, beachMarker);
                                    position = beachMarker.position;// iw.getPosition();
                                    if ($(".gm-style-iw").length > 0) {
                                        $(".gm-style-iw").removeAttr("width");
                                        $(".gm-style-iw").each(function () {
                                            if (!$(this).find("div.divFirstSnap").length) {
                                                $(this).addClass("wiThouImage");
                                            }
                                        })

                                        clearInterval(checkExist);
                                    }

                                }, 1000);
                            }

                            //Following section is used to manage device pop-ups after ajax 
                            for (var i = 0; i < infoWindowDevicePoints.length; i++) {
                                infoWindowDevicePoints[i].latLng
                                if (position == infoWindowDevicePoints[i].latLng)
                                    isExist = false;
                            }

                            if (isExist) {
                                infoWindowDevicePoints.push({
                                    latLng: beachMarker.position,
                                    popUpData: beachMarker.desc
                                });
                            }
                            UnBlockGlanceScreen();
                        }
                    });
                    }
            });
            google.maps.event.addListener(infoWindow, "closeclick", function () {
                debugger;

                var that = this;
                that.getposition()
                var latlnginfo = that.getposition();
                infowindowdevicepoints = $.grep(infowindowdevicepoints, function (value) {
                    return value.latlng != latlnginfo;
                });
            });

                oms.addListener('spiderfy', function () {
                    infoWindow.close();
                    infoWindowDevicePoints.length = 0;
                });
                oms.addMarker(beachMarker);

            }

        });


});

预先感谢您提供的任何帮助。

Answer 1

问题是您只是创建 infoWindow 来响应 ajax 请求。但是，当您添加 closeclick 事件监听器时，该事件监听器可能会在 ajax 响应发生之前执行。

您需要移动此 block :

google.maps.event.addListener(infoWindow, "closeclick", function() {
    debugger;

    var that = this;
    that.getposition()
    var latlnginfo = that.getposition();
    infowindowdevicepoints = $.grep(infowindowdevicepoints, function(value) {
        return value.latlng != latlnginfo;
    });
});

...在此 block 内，在创建 infoWindow 的 if-else 语句之后

$.ajax({
    ...
    success: function(result) {
            // add a call to the event listener here
    }