javascript - Google map InfoBox 和 ajax 调用导致多个渲染

Question

我对如何实现信息框有疑问，想知道是否有人对可能的解决方案有深入的了解。

目前我有大约 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，请在全局范围内创建一个，并将其用于所有标记。您引用的 fiddle 就是这样做的(var ib = new InfoBox(); 是单个全局 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
    });
}