单击地图时关闭信息框答案

【问题标题】：Close Infobox when clicking on the map单击地图时关闭信息框
【发布时间】：2011-09-26 18:05:55
【问题描述】：

我正在使用 Google Maps V3 API 的 Infobox 插件 (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html)

当用户像在地图上一样点击信息框外时，信息框是否太近了？

【问题讨论】：

标签： javascript jquery google-maps google-maps-api-3

【解决方案1】：

如果你将你的信息窗口作为一个全局变量，或者至少在一个方便的地方保存一个代表你想要添加的单个信息框的变量，这实际上会更容易。

编辑： 只是为了澄清：例如，它应该不是window.myInfoBox。对于全局，我的意思是您引用信息框的单个点

google.maps.event.addListener(map, 'click', function() {
    if(infowindow){
       infowindow.close();
    }
});

就是这样:-)

【讨论】：

【解决方案2】：

你会想要使用 addListener()

http://code.google.com/apis/maps/documentation/javascript/events.html#EventListeners

您可以修改此处找到的代码：

google.maps.event.addListener(_point.popup, 'domready', function() {
//Have to put this within the domready or else it can't find the div element (it's null until the InfoBox is opened)

    $(_point.popup.div_).hover(
        function() {
            //This is called when the mouse enters the element
        },
        function() {
            //This is called when the mouse leaves the element
            _point.popup.close();
        }
    );
});

来源： Google Maps API v3 Event mouseover with InfoBox plugin

您可以通过以下方式检测地图点击：

google.maps.event.addListener(map, 'click', function() {

});

信息框 API： http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html

【讨论】：

是否可以为我页面上的所有 (10) 个标记添加侦听器？还是我必须单独添加每个？
上面的代码应该适用于所有标记.. 而不是使用 .hover，使用 .live('click'... 编辑：刚刚注意到你在点击地图时想要它，你需要修改上面的代码，但它的想法是一样的。
在地图点击监听器中，只需遍历您的信息框并应用 close() 方法。

【解决方案3】：

这可能对你有用..

var inside = false;
$('#foo').live('mouseenter',function(){ 
    inside=true; 
}).live('mouseleave', function(){ 
    inside=false; 
});
$("body").mouseup(function(){ 
    if(!inside) $('#foo').remove();
});

【讨论】：

我应该使用 jQuery 中的 .live() 还是使用 google maps API 中的 google.maps.event.addListener()？两个听众是一样的吗？
.live() 是 jquery 的函数，所以我认为如果你导入最后一个 jquery js 文件，你可以像这样使用..