如何向傳單地圖添加疊加層？

Question

我創建了一個頂部導航欄和一個位於欄下方的傳單地圖，圖像在這里： 我想要的是藍色導航欄消失了，但只有漢堡包本身作為地圖的覆蓋物。 我有下面的代碼，但似乎無法解決問題，如果我刪除導航欄，漢堡包也不見了。 我希望它只保留地圖，因為它的高度和寬度為 100%，並且漢堡包在那里疊加。 如果有解決方案，請告訴我。

// HTML code
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
        integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
        crossorigin=""/>
        <!-- Make sure you put this AFTER Leaflet's CSS -->
        <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
        integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
        crossorigin=""></script>
        <link rel="stylesheet" href="style.css">
        <style>
            html, body, #map{
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
            #map {
                z-index:0; /* allows other elements to be overlayed */
                background-color: rgb(38, 38, 38);  /* Change the color of the out of bounds regions */
            }
        </style>
        <title>Map Testing</title>
    </head>
    <body>
        <nav class="navbar">
            <span class="open-slide">
                <a href="#" onclick="openSlideMenu()">
                    <svg width="30" height="30">
                        <path d="M0,5 30,5" stroke="#fff"
                        stroke-width="5"/>
                        <path d="M0,14 30,14" stroke="#fff"
                        stroke-width="5"/>
                        <path d="M0,23 30,23" stroke="#fff"
                        stroke-width="5"/>
                    </svg>
                </a>
            </span>
        </nav>
        <div id="side-menu" class="side-nav">
            <a href="#" class="btn-close" onclick="closeSlideMenu()">&times;</a>
            <a href="#">Data</a>
            <a href="#">Imports</a>
            <a href="#">Exports</a>
            <a href="#">Markers</a>
        </div>
        <div id="map">
        <script src="myscripts.js"></script>
        </div>
        <script>
            function openSlideMenu() {
                document.getElementById('side-menu').style.width='300px';
                document.getElementById('main').style.marginLeft='300px';
            }
            function closeSlideMenu() {
                document.getElementById('side-menu').style.width='0';
                document.getElementById('main').style.marginLeft='0';
            }
        </script>
    </body>
</html>


// CSS code
body{
    font-family: "Arial", serif;
    background-color: #f4f4f4;
    overflow-x: hidden;
}
.navbar{
    background-color: #3b5998;
    overflow:hidden;
    height:63px;
}
.navbar a{
    float:left;
    display: block;
    color:#f2f2f2;
    text-align:center;
    padding:14px 16px;
    text-decoration:none;
    font-size:17px;
}
.navbar ul{
    margin:8px 0 0 0;
    list-style:none;
}
.navbar a:hover{
    background-color: #ddd;
    color:#000;
}
.side-nav{
    height:100%;
    width:0;
    position: fixed;
    z-index:1;
    top:0;
    left:0;
    background-color:#111;
    opacity: 0.8;
    overflow-x:hidden;
    padding-top:60px;
    transition: 0.5s;
}
.side-nav a{
    padding: 10px 10px 10px 30px;
    text-decoration: none;
    font-size:22px;
    color:#ccc;
    display:block;
    transition:0.3s;
}
.side-nav a:hover{
    color:#fff;
}
.side-nav .btn-close{
    position: absolute;
    top:0;
    right:22px;
    font-size:36px;
    margin-left: 50px;
}
#main{
    transition:margin-left 0.5s;
    padding:20px;
    overflow: hidden;
    width:100%;
}
@media(min-width:568px){
    /*.navbar-nav{display:none}*/
}

Answer 1

一種選擇是創建一個控件並將它們添加到地圖

L.HamburgerControl = L.Control.extend({

    options: {
        position: 'topright'
        //control position - allowed: 'topleft', 'topright', 'bottomleft', 'bottomright'
    },

    onAdd: function (map) {
        var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control customcss');
        var button = L.DomUtil.create('a', '', container);
            button.innerHTML = '<svg width="30" height="30"> '+
                        '<path d="M0,5 30,5" stroke="#000" '+
                        'stroke-width="5"/>'+
                        '<path d="M0,14 30,14" stroke="#000" '+
                        'stroke-width="5"/>'+
                        '<path d="M0,23 30,23" stroke="#000" '+
                        'stroke-width="5"/> '+
                    '</svg>';
        L.DomEvent.disableClickPropagation(button);
        L.DomEvent.on(button, 'click', this._click);

        container.title = "Open Menu";

        return container;
    },
    _click : function () {
        document.getElementById('side-menu').style.width='300px';
        document.getElementById('main').style.marginLeft='300px';
    }
});

new L.HamburgerControl().addTo(map);

但是對於您的問題，請添加以下 CSS：

.navbar{
  position: absolute;
    background-color: #3b5998;
    overflow:hidden;
    height:63px;
}

如何向傳單地圖添加疊加層？

問題描述

1 個解決方案

解決方案1
1 2019-12-19 10:33:04

如何向傳單地圖添加疊加層？

問題描述

1 個解決方案

解決方案1 1 2019-12-19 10:33:04

解決方案1
1 2019-12-19 10:33:04