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();是单个全局InfoBox）。

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

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

谷歌地图InfoBox和ajax调用导致多个渲染

1 个答案: