javascript - 如何将传单地图边界框设置为该地图图层的组合

Question

我有一个带有两层“active_event_layer”和“inactive_event_layer”的传单地图。使用“map.fitBounds(active_event_layer.getBounds())”，我可以将地图边界框设置为图层的边界。但我真正想做的是将地图边界框设置为两个图层边界的组合。我试过了

var features = L.control.layers(basemaps, overlayMaps).addTo(map);
map.fitBounds(features.getBounds());

但该代码给了我一个错误。如何将地图边界框设置为两个图层“active_event_layer”和“inactive_event_layer”的边界组合这是我的代码

 var active_event_collection = {{ active_events|geojsonfeature:"name"|safe }};
 var inactive_event_collection = {{ inactive_events|geojsonfeature:"name"|safe }};

  function onEachFeature(feature, layer) {
    layer.bindPopup(feature.properties.name);
  }

  function map_init(map, options) {

    var active_event_layer= L.geoJson(active_event_collection, {onEachFeature: onEachFeature})
    var inactive_event_layer = L.geoJson(inactive_event_collection, {onEachFeature: onEachFeature})

    var basemaps = {
            "Gray scale": L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
            }),
            Streets: L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
            })
        };

        var overlayMaps = {
            "Active events": active_event_layer,
            "Inactive events": inactive_event_layer,
          
        };
      
        var features = L.control.layers(basemaps, overlayMaps).addTo(map);
        map.fitBounds(active_event_layer.getBounds());
   
  }

标签： javascriptleafletdjango-leaflet