谷歌地图V3可见标记fitBounds

Question

发现它很难获得明确的信息，但我想实现的是可见标记fitBounds。

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

我可以让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(); 

Answer 1

好了，你可以编写你的show函数中，我创建了自己捣鼓你演示如何设置2个标记从3个标记和fitBounds阵列可见的只有这些：

fiddle example

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

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

Answer 2

在第一个想到你会认为你可以使用一个范围对象，并跟踪哪些是可见的。但既然你也是隐藏标记，你不能从边界移除坐标，那是行不通的。

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

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

Answer 3

enter code here如果（标记[marker_id] .getMap（）！= NULL）{ 的document.getElementById（ 'markerlar'）。innerHTML的+ = '
' + marker_id + '' +标记物[marker_id] .POSITION + ''; //markers[marker_id].setMap(null）; }