5

很难获得关于此的明确信息，但我想要实现的是可见标记上的 fitBounds 。

数组定义了标题、类别、纬度/经度和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();
4

3 回答 3

22

好吧，您可以在您的show函数中对其进行编程，我为您创建了自己的小提琴，它演示了如何设置从 3 个标记的数组中可见的 2 个标记，并且仅为那些设置 fitBounds：

小提琴示例

由于代码现在可见，对于您的情况，您可以创建单独fitBoundsToVisibleMarkers()的方法以始终在方法show()之后运行hide()。例如：

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();
}
于 2013-03-08T17:02:52.267 回答
0

乍一看，您会认为您可以使用边界对象并跟踪可见的内容。但是由于您还隐藏了标记，并且您无法从边界中删除坐标，因此这是行不通的。

我认为最好的选择是显示/隐藏所需的标记，然后遍历所有标记并将它们添加到新的边界对象（如果可见）。然后对此进行限制。

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();
});
于 2013-03-08T17:21:25.127 回答
0

enter code hereif(markers[marker_id].getMap() != null ) { document.getElementById('markerlar').innerHTML += '
' +marker_id+''+markers[marker_id].position+''; //markers[marker_id].setMap(null); }

于 2014-06-04T16:09:43.007 回答