Google Maps InfoBox 和 ajax 调用导致多个渲染

Question

对我如何实施 InfoBox 有疑问，想知道是否有人对可能的解决方案有见解。

目前我有大约 1000 个客户端标记，它们都被动态添加到页面中。它们是使用以下方法生成的。

 var cir = new google.maps.Marker({
            position: new google.maps.LatLng(l.lat, l.lng),
            map: map,
            icon: icons[l.type].simple
        });
        addClickHandlerAjax(cir, l);
        l.m = cir;

方法 addClickHandlerAjax 是单击标记时调用的方法。这是此方法的基础知识。

function addClickHandlerAjax(marker, l) {

    google.maps.event.addListener(marker, "click", function () {

        if(theInfoWindow){
        theInfoWindow.close();
       // InfoWindow = null;
        }
        //get content via ajax
        $.ajax({
            url: 'map/getInfo',
            type: 'get',
            data: {
                'ID': l.f
            },
            success: function (data, status) {
                if (status == "success") {
                    //create infowindow here..
                           theInfoWindow= new InfoBox({
                            content: document.getElementById("infobox-wrapper-hotel"),
                            disableAutoPan: true,
                            enableEventPropagation: true,
                            closeBoxURL: '../assets/images/info-close.png',
                        });
                        theInfoWindow.open(map, marker);
                        touchScroll('rab-scroll');

                });
                }
            },
            error: function (xhr, desc, err) {
                console.log(xhr);
                console.log("Details: " + desc + "\nError:" + err);
            }
        }); // end ajax call
    });
}

问题是当用户非常快速地点击多个标记时。前一个标记的信息框可以保持打开状态。但它可能不包含任何内容。

有谁知道如何通过安全关闭信息框的所有实例来正确处理多个信息框？

我在这个实现中看不到这种行为Jsfiddle

Answer 1

最简单的解决方法：如果您只想一次打开一个 InfoBox，请在全局范围内创建 一个，并将其用于所有标记。您引用的小提琴就是这样做的（var ib = new InfoBox(); 是单个全局信息框）。

要解决冗长的响应时间，请更改您的 ajax 处理以将其考虑在内（仅在回调函数成功时关闭现有信息窗口）：

function addClickHandlerAjax(marker, l) {

    google.maps.event.addListener(marker, "click", function () {

        //get content via ajax
        $.ajax({
            url: 'map/getInfo',
            type: 'get',
            data: {
                'ID': l.f
            },
            success: function (data, status) {
              if (status == "success") {
                // close the existing infowindow only if the AJAX response succeeds
                if(theInfoWindow){
                  theInfoWindow.close();
                }
                // remove the existing infowindow from the map if the AJAX response succeeds                    
                if (theInfoWindow.setMap) theInfoWindow.setMap(null); 
                //create a new infowindow here, with the returned content..
                theInfoWindow= new InfoBox({
                   content: document.getElementById("infobox-wrapper-hotel"),
                   disableAutoPan: true,
                   enableEventPropagation: true,
                   closeBoxURL: '../assets/images/info-close.png',
                });
                theInfoWindow.open(map, marker);
                touchScroll('rab-scroll');
              });
            }
          },
          error: function (xhr, desc, err) {
              console.log(xhr);
              console.log("Details: " + desc + "\nError:" + err);
          }
        }); // end ajax call
    });
}