关闭所有信息窗口谷歌地图API V3？ [英] Close all info windows google maps API V3?

问题描述

如何获取所有信息窗口在关闭其他别针或单击地图时自动关闭？
我使用 http：// google- maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html
和一个kml覆盖图。
heres我的JS到目前为止：

How do i get all info windows to close upon clikcing another pin or clicking the map in itself? I'm using http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html and a kml overlay. heres my JS so far:

jQuery(document).ready(function ($) {
    function initialize() {
        google.maps.visualRefresh = true;
        var myLatlng = new google.maps.LatLng(51.201465, -0.30244);
        var mapOptions = {
            zoom: 12,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);

        var kmlLayer = new google.maps.KmlLayer({
            url: 'http://***.com/new/wp-content/themes/required-starter/CGAGolfAcademies.kml?rand=' + (new Date()).valueOf(),
            suppressInfoWindows: true,
            map: map
        });

        google.maps.event.addListener(kmlLayer, 'click', function (kmlEvent) {
            showInContentWindow(kmlEvent.latLng, kmlEvent.featureData.description);
        });

        function showInContentWindow(position, text) {
            var content = "<div class='info_win'><p>" + text + "</p></div>";
            var infowindow =new InfoBox({
                 content: content,
                 disableAutoPan: false,
                 maxWidth: 0,
                 position: position,
                 pixelOffset: new google.maps.Size(-140, 0),
                 zIndex: null,
                 boxStyle: { 
                  background: "#FBFBFB"
                  ,opacity: 0.90
                  ,width: "280px"
                 },
                 closeBoxMargin: "10px 2px 2px 2px",
                 closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
                 infoBoxClearance: new google.maps.Size(1, 1),
                 isHidden: false,
                 pane: "floatPane",
                 enableEventPropagation: false
        });


    infowindow.open(map);

        }
                    /******AJAX MAP ****/
            siteURL = 'http://' + top.location.host.toString();
            coachesLinks = jQuery('.info_win a');
            coachesLinks.click(function (e) {
                e.preventDefault();
            });
            coachesLinks.click(function (e) {
                alert('FRED');
                $el = jQuery(this);
                URL = $el.attr('href');
                shareurl = $el.attr('href');
                URL = URL + " .main";
                jQuery('#content_two').show('slow').load(URL, function () {
                    scrollToAnchor('content_two');
                    $('.main').css('overflow', 'visible');
                    $('#content_two').css('overflow', 'visible');
                    jQuery('#content_two .back').on('click', function () {
                        jQuery(this).hide('slow');
                        var contentTwo = jQuery('#content_two');
                        if (contentTwo.is(':hidden')) {
                            jQuery('#content_two .back').hide();
                        } else {
                            contentTwo.hide('slow');
                            jQuery('#content > .main').show('slow');
                            jQuery('#content > .main').css('overflow', 'visible');
                            scrollToAnchor('access');
                        }
                    });

                });
                $('#content > .main').hide('slow');
            });

    }

    google.maps.event.addDomListener(window, 'load', initialize);
});

推荐答案

正如您在 API文档，InfoBox有一个 close（） - 方法。

As you see in the API docs, an InfoBox has a close()-method.

收集您在数组中创建的所有InfoBox。然后遍历这个数组，并且当你需要一次关闭它们时，为每个信息框调用 close 。

Collect all the InfoBox'es you create in an array. Then iterate over this array and call close for each infobox, when you need to close them all at once.

在顶部添加一个数组来保存所有创建的信息框

In the top, add an array to hold all the infoboxes created

jQuery(document).ready(function ($) {
    var infoWindows = [];

在函数 showInContentWindow 在 var infowindow = new .. 之后添加以下内容，例如在 infowindow.open

In function showInContentWindow add the following right after var infowindow=new.., eg just before infowindow.open

//add infowindow to array
infoWindows.push(infowindow); 

添加此函数

add this function

function closeAllInfoWindows() {
  for (var i=0;i<infoWindows.length;i++) {
     infoWindows[i].close();
  }
}

此处由链接调用

here called by a link

<a href="#" onclick="closeAllInfoWindows();">Close all infowindows</a>

这篇关于关闭所有信息窗口谷歌地图API V3？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！