个人中心
gpt4 book ai didi

javascript - 使用 bootstrap 设置全屏 leaflet.js map

转载 作者：塔克拉玛干 更新时间：2023-11-02 22:32:04 24 4
gpt4 key购买 nike

我正在使用基于这些示例的模板:

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

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

我只想拥有一张完整尺寸的传单 map 。但是，我无法让它工作。

这是我的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;
}

这是 ma​​p.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 。我设置没关系:

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

或者:

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

在css文件上。我想知道出了什么问题。

最佳答案

看看这个 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%;
}

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

关于javascript - 使用 bootstrap 设置全屏 leaflet.js map ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33962616/

24 4 0
文章推荐： javascript - `innerText`怎么设置淡入效果？
文章推荐： Android Cover Flow 图库并删除之间的空间
文章推荐： android - 如何删除 Android 4+ 中的设置向导应用程序？
文章推荐： javascript - 为什么我在 console.log(createdAnimal) 时得到 undefined？
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com