Кнопка выпадающего меню Bootstrap не отображается вместе с картой Leaflet - PullRequest
Новая
       6

Кнопка выпадающего меню Bootstrap не отображается вместе с картой Leaflet

0 голосов
/ 05 декабря 2018

Я пытаюсь создать буклет JS Map с кнопками Bootstrap.Я сделал карту полноэкранной и поместил кнопки поверх нее.Вот код: 

<!DOCTYPE html>
<html>
<head>

    <title>Map</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="static/bootstrap/js/bootstrap.min.js"></script>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
    <link rel="stylesheet" media="screen" href ="static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/bootstrap/css/bootstrap-theme.min.css">

    <style>
        body {
            padding: 0;
            margin: 0;
        }
        html, body, #map {
            height: 100%;
            width: 100%;
        }

        #back_button {
          position: absolute;
          top: 20px;
          left: 20px;
          padding: 10px;
          z-index: 1001;
        }

        #drop_button {
          position: absolute;
          top: 80px;
          left: 20px;
          padding: 10px;
          z-index: 1001;
        }
    </style>


</head>
<body>
    <div id='map'>
    </div>

    <form  action="/" method="post" role="form">
        <button type="submit" class="btn btn-default" id="back_button"><- Back</button>
    </form>

    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" id="drop_button">Dropdown Example
      <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </div>
<script>
    var map = L.map('map', {zoomControl:false}).setView([47.57768554635565,-122.16660887002944], 13);

    var coordinate = {{list_latlong | tojson | safe}};
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    var logoIcon = L.icon({
        iconUrl: './static/picture.png',
        iconSize:     [22, 22], // size of the icon
        iconAnchor:   [11, 22], // point of the icon which will correspond to marker's location
    });

    var i;
    for (i = 0; i < coordinate.length; i++) {
        var point = coordinate[i]
        var text = "";
        text = "<dl><dt>Number: " + point[2] + "</dt>"
        + "<dt>" + point[5] + "</dt>"
        + "<dt>" + point[6] + ", " + point[7] + ", " + point[8] + "</dt>"
        +"</dl>"
        L.marker([point[3],point[4]], {icon: logoIcon}).bindPopup(text).addTo(map);
    }


</script>
</body>
</html>

При запуске этого кода будут отображаться только кнопка «Назад» и кнопка без выпадающего меню.Если я удаляю 

<link rel="stylesheet" media="screen" href ="static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="static/bootstrap/css/bootstrap-theme.min.css">

Раскрывающаяся кнопка и кнопка возврата отображаются, но элементы в раскрывающемся меню не отображаются.

Ответы [ 2 ]

0 голосов
/ 05 декабря 2018

Я исправил это для вас, по нескольким причинам, во-первых, неправильная ссылка начальной загрузки, во-вторых, вы добавляете неправильные стили для неправильной кнопки id #dropdown, чтобы кнопка отображалась, но в нижнем колонтитуле, чтобы вы непосмотрите, вот полный код с правками для некоторых файлов и URL с обновлением нового стиля с #dropdown до родительского div .dropdown

<!DOCTYPE html>
<html>
<head>

    <title>Map</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"/>

    <style>
        body {
            padding: 0;
            margin: 0;
        }
        html, body, #map {
            height: 100%;
            width: 100%;
        }

        #back_button {
          position: absolute;
          top: 20px;
          left: 20px;
          padding: 10px;
          z-index: 1001;
        }
        .dropdown {
          position: absolute;
          top: 80px;
          left: 20px;
          z-index: 1001;
        }
    </style>
</head>
<body>
    <div id='map'>
    </div>

    <form  action="/" method="post" role="form">
        <button type="submit" class="btn btn-default" id="back_button"><- Back</button>
    </form>
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" id="drop_button">Dropdown Example
      <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
    var map = L.map('map', {zoomControl:false}).setView([47.57768554635565,-122.16660887002944], 13);

    var coordinate = {{list_latlong | tojson | safe}};
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    var logoIcon = L.icon({
        iconUrl: './static/picture.png',
        iconSize:     [22, 22], // size of the icon
        iconAnchor:   [11, 22], // point of the icon which will correspond to marker's location
    });

    var i;
    for (i = 0; i < coordinate.length; i++) {
        var point = coordinate[i]
        var text = "";
        text = "<dl><dt>Number: " + point[2] + "</dt>"
        + "<dt>" + point[5] + "</dt>"
        + "<dt>" + point[6] + ", " + point[7] + ", " + point[8] + "</dt>"
        +"</dl>"
        L.marker([point[3],point[4]], {icon: logoIcon}).bindPopup(text).addTo(map);
    }


</script>
</body>
</html>
0 голосов
/ 05 декабря 2018 
<script src="static/bootstrap/js/bootstrap.min.js"></script>

Это файл сценария начальной загрузки, чтобы заставить работать меню и другие причудливые js-зависимые вещи.Но для того, чтобы он работал, он должен иметь DOM (объектную модель документа) для работы.В настоящее время у вас есть скрипт, запускаемый сразу после jQuery, без каких-либо элементов DOM, с которыми он мог бы работать (элементы меню еще не были проанализированы!).

Попробуйте поставить это прямо перед тем, как закрыть тег </body>.Это должно заставить работать элементы меню.

...