使用引导程序设置全屏leaflet.js映射

Question

我正在根据以下示例创建模板：

http://getbootstrap.com/examples/dashboard/

http://leafletjs.com/examples/choropleth.html

我只想要一张完整的传单地图。但是，我无法使其正常工作。

这是我的index.html文件：

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>NY Noise Map</title>
            <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
            <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
            <!-- ####Leaflet#### -->
            <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
            <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
            <!-- ################ -->
            <!-- ####Bootstrap### -->
            <script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
            <link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.min.css" />
            <!-- ################ -->
            <!-- #####Custom##### -->
            <script src="Scripts/map.js"></script>
            <link rel="stylesheet" href="CSS/dashboard.css" />
            <!-- ################ -->
        </head>
        <body>
            <!-- Top bar -->
            <nav class="navbar navbar-inverse navbar-fixed-top">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">NY Noise Map</a>
                    </div>
                </div>
            </nav>

            <!-- Content -->
            <div class="container-fluid">
                <!-- Right Panel -->
                <div class="row">
                    <div class="col-sm-3 col-md-2 sidebar"></div>
                </div>

                <!-- Main Content -->
                <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                    <h1>NYC 311 Noise Complaints</h1>
                    <div id="map"></div>        
                </div>
            </div>


        </body>
        <script type="text/javascript">

            // Map creation
            createMap();
        </script>
</html>

这是dashboard.css文件：

 /*
 * Base structure
 */

html, body, #container {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

/* Move down content because we have a fixed navbar that is 50px tall */
body {
  padding-top: 50px;
}


/*
 * Sidebar
 */

.sidebar {
  float: left;
  height: 100%;
  max-width: 100%;
}


@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
  }
}


/*
 * Main content
 */

.main {
  height: 100%;
  width: 100%;
  padding: 20px;
}
@media (min-width: 768px) {
  .main {
    padding-right: 40px;
    padding-left: 40px;
  }
}
.main .page-header {
  margin-top: 0;
}

这是map.js文件：

/* Map definition */

//---- Map creation

// Map size
var width = 1000,
    height = 1000,
    active = d3.select(null);

// Map reference
var map;

// Geojson of the neighborhoods reference
var geojson;

// ---- Map Creation
// Creates a map inside div id="map"
function createMap()
{               
    // Set map wrapper size
    d3.select('#map')
      .style('width', width + 'px')
      .style('height', height + 'px');

    // Create Leftlet map and center it in the desired position
    // with the desirable zoom level
    map = L.map('map').setView([40.658528, -73.952551], 10);

    // Load a tile layer  
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
    { 
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>',
        maxZoom: 18, 
        minZoom: 10
    }).addTo(map);
}

如果我对此行发表评论：

// Set map wrapper size
d3.select('#map')
  .style('width', width + 'px')
  .style('height', height + 'px');

我在屏幕上看不到任何地图。是否设置以下内容无关紧要：

#map {
    height: 100px;
    width: 100px;
}

要么：

#map {
    height: 100%;
    width: 100%;
}

在css文件上。我想知道怎么了。

Answer 1

看一下这个Leaflet + Bootstrap组合的简单示例：http : //plnkr.co/edit/wH7u64?p=preview

最主要的是设置map元素和所有父元素的宽度和高度，如下所示：

html, body, #container /*, and all other map parent selectors*/ {
  height: 100%;
  overflow: hidden;
  width: 100%;
}
#map {
  width: auto;
  height: 100%;
}

为了使其适合您的情况，您还应该编辑填充和父元素上设置的其他内容。