Google maps api 3 谷歌地图在可见标记上的边界

我发现很难获得关于这一点的明确信息，但我试图实现的是对可见标记的限制

该数组定义标题、类别、lat/long和href。它将所有标记添加到地图中，但仅显示第一个类别。当你点击其他图标时，它也会显示这些图标

我可以让fitBounds处理其他较小的示例，在这些示例中，它只需要在初始负载上fitBounds，但现在我希望每次显示/隐藏标记时都使用fitBounds

谢谢你的建议

function initialize() {
            var markers = new Array();
            var locations = [
                ['Ness Country Park', '', 'walking', 54.933402, -7.197418, "/local-activities/specific/ness-country-park"],
                ['Learmount Forest', '', 'walking', 54.862672, -7.085495, "/local-activities/specific/learmount-forest"],
                ['Muff Glen', 'Muff Glen Forest is nestled in a valley, just outside Eglinton. ', 'walking', 55.029472, -7.170124, "/local-activities/specific/muff-glen"],
                ['Banagher Forest', '', 'walking', 54.893855, -7.020693, "/local-activities/specific/banagher-forest"],
                ['Binevenagh Forest', '', 'walking', 55.083549, -6.901131, "/local-activities/specific/binevenagh-forest"],
                ['17th Century Walls', '', 'explore', 54.997666, -7.319770, "/local-activities/specific/17th-century-walls"],
                ['Apprentice Boys Memorial Hall', '', 'explore', 54.995339, -7.323890, "/local-activities/specific/apprentice-boys-memorial-hall"],
                ['The Bogside Artists', '', 'explore', 54.998466, -7.325177, "/local-activities/specific/the-bogside-artists"],
                ['Foyle Valley Railway Museum', '', 'explore', 54.991154, -7.321572, "/local-activities/specific/foyle-valley-railway-museum"],
                ['Gasyard Heritage Centre', '', 'explore', 54.989923, -7.333674, "/local-activities/specific/gasyard-heritage-centre"],
                ['The Guildhall', '', 'explore', 54.996053, -7.320800, "/local-activities/specific/the-guildhall"],
                ['Harbour Museum', '', 'explore', 54.998269, -7.319427, "/local-activities/specific/harbour-museum"],
                ['Museum of Free Derry', '', 'explore', 54.997099, -7.326121, "/local-activities/specific/museum-of-free-derry"],
                ['Riverwatch Aquarium and Visitor Centre', '', 'explore', 54.988950, -7.317538, "/local-activities/specific/riverwatch-aquarium-and-visitor-centre"],
                ['St Augustines Church', '', 'explore', 54.994736, -7.324040, "/local-activities/specific/st-augustines-church"],
                ['St Columbs Cathedral', '', 'explore', 54.994564, -7.322345, "/local-activities/specific/st-columbs-cathedral"],
                ['St Columbas Church Tower', '', 'explore', 55.010132, -7.330992, "/local-activities/specific/st-columbas-church-tower"],
                ['Tower Museum', '', 'explore', 54.997112, -7.320328, "/local-activities/specific/tower-museum"],
                ['Workhouse Museum', '', 'explore', 54.994995, -7.305071, "/local-activities/specific/workhouse-museum"],
                ['Hezlett House', '', 'explore', 55.161697, -6.787148, "/local-activities/specific/hezlett-house"],
                ['Mussenden Temple & Downhill Demense', '', 'explore', 55.166404, -6.819849, "/local-activities/specific/mussenden-temple-and-downhill-demense"],
                ['Springhill House', '', 'explore', 54.685615, -6.656857, "/local-activities/specific/springhill-house"],
                ['Fort Dunree', '', 'explore', 55.196691, -7.547607, "/local-activities/specific/fort-dunree"],
                ['Barron Top Fun Farm', '', 'explore', 54.856497, -7.335434, "/local-activities/specific/barron-top-fun-farm"],
                ['Ulster American Folk Park', '', 'explore', 54.587973, -7.377191, "/local-activities/specific/ulster-american-folk-park"],
                ['Wellbrook Beetling Mill', '', 'explore', 54.651366, -6.836071, "/local-activities/specific/wellbrook-beetling-mill"],
                ['Claudy Country Park', '', 'cycling', 54.911868, -7.151756, "/local-activities/specific/claudy-country-park"],
                ['Faughan Valley Cycle Route', '', 'cycling', 54.981797, -7.337022, "/local-activities/specific/faughan-valley-cycle-route"],
                ['Foyle Valley Cycle Route ', '', 'cycling', 55.001530, -7.321208, "/local-activities/specific/foyle-valley-cycle-route-"],
                ['Royal Portrush Golf Club', '', 'golfing', 55.199823, -6.634820, "/local-activities/specific/royal-portrush-golf-club"],
                ['Porstewart Golf Club', '', 'golfing', 55.172149, -6.724534, "/local-activities/specific/porstewart-golf-club"],
                ['Castlerock Golf Club ', '', 'golfing', 55.165945, -6.785645, "/local-activities/specific/castlerock-golf-club-"],
                ['Cregan Country Park', '', 'family', 54.999841, -7.343888, "/local-activities/specific/cregan-country-park"],
                ['Riverwatch Aquarium', '', 'family', 54.988852, -7.317495, "/local-activities/specific/riverwatch-aquarium"],
                ['Far & Wild Adventure Activities', '', 'family', 55.048369, -7.276855, "/local-activities/specific/far-and-wild-adventure-activities"],
                ['Brunswick Cinebowl', '', 'family', 55.013008, -7.324448, "/local-activities/specific/brunswick-cinebowl"],
                ['Campsie Karting', '', 'family', 55.036076, -7.196903, "/local-activities/specific/campsie-karting"],
                ['Barron Top Fun Farm', '', 'family', 54.856497, -7.335434, "/local-activities/specific/barron-top-fun-farm-1"],
                ['Ulster American Folk Park', '', 'family', 54.587973, -7.377191, "/local-activities/specific/ulster-american-folk-park-1"],
                ['Giants Causeway', '', 'family', 55.233317, -6.518154, "/local-activities/specific/giants-causeway"],
                ['Carick-a-Rede Rope Bridge', '', 'family', 55.237282, -6.351643, "/local-activities/specific/carick-a-rede-rope-bridge"],
                ['Mussenden Temple', '', 'family', 55.165410, -6.818218, "/local-activities/specific/mussenden-temple"]
            ];

            //Set up Google Map
            var map = new google.maps.Map(document.getElementById('map-canvas'), {
                zoom: 15,
                center: new google.maps.LatLng(55.013431, -7.314148),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });


            //InfoBox will be used so InfoWindow is not needed
            //var infowindow = new google.maps.InfoWindow();

            //Set shadow options
            var shadow = new google.maps.MarkerImage('images/marker-shadow.png',
                new google.maps.Size(77.0, 62.0),
                new google.maps.Point(0, 0),
                new google.maps.Point(22.0, 62.0)
            );
            var marker, i;



            for ( var i = 0; i < locations.length; i++ ) {
              console.log(locations[i][3], locations[i][4]);
            }


            for (i = 0; i < locations.length; i++) {  
                marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][3], locations[i][4]),
                map: map,
                shadow: shadow,
                icon: 'images/map_'+locations[i][2]+'_image.png'
            });

            markers.push(marker);

            //Create div for InfoBox content
            var boxText = document.createElement("div");

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function () {
                    //Style InfoBox content
                    boxText.style.cssText = "border: none 0; margin-top: 8px; background:#fff; padding: 8px;border:1px solid #877856;";
                    boxText.innerHTML = locations[i][0]+"<br />"+locations[i][2]+"<br />"+locations[i][1]+"<img src='images/tipbox.png' class='infobox-arrow' />";

                    //Remove close box bug fix
                    $(".infobox-close").remove();

                    //Set InfoBox options
                    var myOptions = {
                        content: boxText
                        ,disableAutoPan: false
                        ,maxWidth: 0
                        ,pixelOffset: new google.maps.Size(-140, -180)
                        ,zIndex: null
                        ,boxStyle: { 
                            opacity: 1
                            ,width: "280px"
                            }
                        ,closeBoxMargin: "12px 7px 0 0"
                        ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
                        ,infoBoxClearance: new google.maps.Size(1, 1)
                        ,isHidden: false
                        ,pane: "floatPane"
                        ,enableEventPropagation: false
                    };

                    //Move map to center on marker
                    map.setCenter(marker.getPosition());

                    //Attach info box to relevant marker
                    var ib = new InfoBox(myOptions);
                    ib.open(map, marker);

                    //Close InfoBox when map tiles are clicked
                    $("canvas").click(function () {
                        ib.close(map, marker);
                    });
                }
                })(marker, i));
            };


            //shows all markers of a particular category, and ensures the checkbox is checked
            function show(category) {
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][2] == category) {
                        markers[i].setVisible(true);
                    }
                }
            }

            //hides all markers of a particular category, and ensures the checkbox is cleared
            function hide(category) {
                for (var i=0; i<locations.length; i++) {
                    if (locations[i][2] == category) {
                        markers[i].setVisible(false);
                    }
                }
            }

            //show or hide the categories initially
            show("walking");
            hide("golfing");
            hide("family");
            hide("explore");
            hide("cycling");


            //Show/Hide category markers
            $("#activities .checkbox").click(function(){
                var cat = $(this).attr("value");
                // If checked
                if ($(this).is(":checked"))
                {
                    show(cat);

                }
                else
                {
                    hide(cat);
                }
            });
        };

        //Execute function onload
        window.load = initialize();

函数初始化（）{
var markers=新数组（）；
变量位置=[
[“尼斯郊野公园”，“步行”，54.933402，-7.197418，“/当地活动/具体/尼斯郊野公园”]，
['Learmount Forest'，'''walking'，54.862672，-7.085495，“/local activities/specific/Learmount Forest”]，
['Muff Glen'，'Muff Glen Forest位于埃格林顿郊外的山谷中，'walking'，55.029472，-7.170124，“/local activities/Special/Muff Glen”]，
['Banagher Forest'，'walking'，54.893855，-7.020693，“/local activities/specific/Banagher Forest”]，
['Binevenagh Forest'，'''walking'，55.083549，-6.901131，“/当地活动/特定/Binevenagh Forest”]，
[“17世纪墙”，“探索”，54.997666，-7.319770，“/当地活动/特定/17世纪墙”]，
[“学徒男孩纪念馆”，“探索”，54.995339，-7.323890，“/当地活动/特定/学徒男孩纪念馆”]，
['The Bogside Artists'，'explore'，54.998466，-7.325177，“/本地活动/特定/Bogside Artists”]，
['Foyle Valley铁路博物馆'，'explore'，54.991154，-7.321572，“/当地活动/具体/Foyle Valley铁路博物馆”]，
[“加气场遗产中心”，“探索”，54.989923，-7.333674，“/当地活动/特定/加气场遗产中心”]，
[The Guildhall'，“explore”，54.996053，-7.320800，”/local activities/specific/The Guildhall”，
[“海港博物馆”，“探索”，54.998269，-7.319427，“/当地活动/具体/海港博物馆”]，
[“自由德里博物馆”，“探索”，54.997099，-7.326121，”/local activities/specific/Museum of Free Derry”]，
['Riverwatch水族馆和游客中心'，'explore'，54.988950，-7.317538，“/local activities/specific/Riverwatch水族馆和游客中心”]，
[St Augustine Church'，“explore”，54.994736，-7.324040，”/local activities/specific/St Augustine Church”，
[St Columbs Cathedral'，“explore”，54.994564，-7.322345，”/local activities/specific/St Columbs Cathedral”，
[St Columbas Church Tower'，“explore”，55.010132，-7.330992，“/local activities/specific/St Columbas Church Tower”，
[Tower Museum'，“explore”，54.997112，-7.320328，”/local activities/specific/Tower Museum”，
[“济贫院博物馆”，“探索”，54.994995，-7.305071，“/当地活动/特定/济贫院博物馆”]，
['Hezlett House'，'''explore'，55.161697，-6.787148，“/local activities/specific/Hezlett House”]，
[“穆森登神庙和下坡德门塞”，“探索”，55.166404，-6.819849，“/当地活动/具体/穆森登神庙和下坡德门塞”]，
['Springhill House'，'explore'，54.685615，-6.656857，“/local activities/specific/Springhill House”]，
['Fort Dunree'，''explore'，55.196691，-7.547607，“/当地活动/具体/Dunree堡”]，
['Barron Top Fun Farm'，'''explore'，54.856497，-7.335434，“/本地活动/特定/Barron Top Fun Farm”]，
[“阿尔斯特美国民俗公园”，“探索”，54.587973，-7.377191，“/当地活动/特定/阿尔斯特美国民俗公园”]，
['Wellbrook甜菜厂'，'explore'，54.651366，-6.836071，“/当地活动/特定/Wellbrook甜菜厂”]，
[“克劳迪郊野公园”，“骑自行车”，54.911868，-7.151756，“/当地活动/具体/克劳迪郊野公园”]，
['Faughan Valley单车路线'，'cycling'，54.981797，-7.337022，“/当地活动/特定/Faughan Valley单车路线”]，
['Foyle Valley单车路线'，''，'cycling'，55.001530，-7.321208，“/当地活动/特定/Foyle Valley单车路线-”，
['Royal Portrush高尔夫俱乐部'，'golfing'，55.199823，-6.634820，“/当地活动/特定/Royal Portrush高尔夫俱乐部”]，
['Porstwart高尔夫俱乐部'，'golfing'，55.172149，-6.724534，“/当地活动/特定/Porstwart高尔夫俱乐部”]，
['Castlerock高尔夫俱乐部'，''golfing'，55.165945，-6.785645，“/当地活动/特定/Castlerock高尔夫俱乐部-”，
[“克里根郊野公园”，“家庭”，54.999841，-7.343888，”/local activities/specific/Cregan郊野公园]，
[“Riverwatch水族馆”，“家庭”，54.988852，-7.317495，”/local activities/specific/Riverwatch水族馆]，
[Far&Wild Adventation Activities'，“family”，55.048369，-7.276855，“/local Activities/specific/Far and Wild Adventation Activities”]，
['Brunswick Cinebowl'，''family'，55.013008，-7.324448，“/当地活动/特定/Brunswick Cinebowl”]，
[“卡丁车运动”，“家庭”，55.036076，-7.196903，“/当地活动/特定/卡丁车运动”]，
['Barron Top Fun Farm'，'family'，54.856497，-7.335434，“/本地活动/specific/Barron-Top-Fun-Farm-1”]，
[“阿尔斯特美国民俗公园”，“家庭”，54.587973，-7.377191，”/local activities/specific/Ulster-American-Folk-Park-1“，
[“巨人堤道”，“家族”，55.233317，-6.518154，”/local activities/specific/Giants堤道]，
['Carick-a-Rede索桥'，'family'，55.237282
function fitBoundsToVisibleMarkers() {

    var bounds = new google.maps.LatLngBounds();

    for (var i=0; i<markers.length; i++) {
        if(markers[i].getVisible()) {
            bounds.extend( markers[i].getPosition() );
        }
    }

    map.fitBounds(bounds);

}

function show(category) {
    for (var i=0; i<locations.length; i++) {
        if (locations[i][2] == category) {
            markers[i].setVisible(true);
        }
    }

    // updating bounds in view
    fitBoundsToVisibleMarkers();
}

function hide(category) {
    for (var i=0; i<locations.length; i++) {
        if (locations[i][2] == category) {
            markers[i].setVisible(false);
        }
    }

    // updating bounds in view
    fitBoundsToVisibleMarkers();
}

function fitVisibleMarkers() {
    var bounds = new google.maps.LatLngBounds();
    for(var m in markers) {
        if (markers[m].getVisible()) {
            bounds.extend(markers[m].getPosition());
        }
    }
    map.fitBounds(bounds);
}

$("#activities .checkbox").click(function(){
    var cat = $(this).attr("value");
    if ($(this).is(":checked")) {
        show(cat);
    } else {
        hide(cat);
    }
    fitVisibleMarkers();
});