Javascript 如何向传单地图添加覆盖图?
我创建了一个顶部导航栏和一个位于导航栏下方的传单地图,图片在这里:我想要的是蓝色导航栏消失了,而仅仅是汉堡包本身作为地图的覆盖。我有下面的代码,但似乎无法解决问题,如果我删除导航栏,汉堡也不见了。我希望它只保留地图,因为它的高度和宽度为100%,汉堡是一个覆盖在那里。如果有解决办法,一定要告诉我Javascript 如何向传单地图添加覆盖图?,javascript,html,css,leaflet,Javascript,Html,Css,Leaflet,我创建了一个顶部导航栏和一个位于导航栏下方的传单地图,图片在这里:我想要的是蓝色导航栏消失了,而仅仅是汉堡包本身作为地图的覆盖。我有下面的代码,但似乎无法解决问题,如果我删除导航栏,汉堡也不见了。我希望它只保留地图,因为它的高度和宽度为100%,汉堡是一个覆盖在那里。如果有解决办法,一定要告诉我 // HTML code <!DOCTYPE html> <html lang="en"> <head> <meta charset="
// 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()">×</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}*/
}
//HTML代码
html,body,#map{
身高:100%;
宽度:100%;
保证金:0;
填充:0;
}
#地图{
z索引:0;/*允许覆盖其他元素*/
背景色:rgb(38,38,38);/*更改边界外区域的颜色*/
}
地图测试
函数openSlideMenu(){
document.getElementById('side-menu').style.width='300px';
document.getElementById('main').style.marginLeft='300px';
}
函数closeSlideMenu(){
document.getElementById('side-menu').style.width='0';
document.getElementById('main').style.marginLeft='0';
}
//CSS代码
身体{
字体系列:“Arial”,衬线;
背景色:#F4;
溢出x:隐藏;
}
navbar先生{
背景色:#3b5998;
溢出:隐藏;
高度:63px;
}
纳瓦尔先生{
浮动:左;
显示:块;
颜色:#F2F2;
文本对齐:居中;
填充:14px 16px;
文字装饰:无;
字号:17px;
}
纳瓦尔先生{
利润率:8px0;
列表样式:无;
}
.导航栏a:悬停{
背景色:#ddd;
颜色:#000;
}
.侧导航{
身高:100%;
宽度:0;
位置:固定;
z指数:1;
排名:0;
左:0;
背景色:#111;
不透明度:0.8;
溢出x:隐藏;
填充顶部:60px;
过渡:0.5s;
}
.侧导航a{
填充:10px 10px 10px 30px;
文字装饰:无;
字体大小:22px;
颜色:#ccc;
显示:块;
过渡:0.3s;
}
.侧导航a:悬停{
颜色:#fff;
}
.侧导航btn关闭{
位置:绝对位置;
排名:0;
右:22px;
字体大小:36px;
左边距:50像素;
}
#主要{
过渡:左边距0.5s;
填充:20px;
溢出:隐藏;
宽度:100%;
}
@介质(最小宽度:568px){
/*.navbar导航{显示:无}*/
}
一个选项是创建控件并将其添加到地图中
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';
}
});
但对于您的问题,请在CSS中添加以下内容:
.navbar{
position: absolute;
background-color: #3b5998;
overflow:hidden;
height:63px;
}
请张贴您的完整代码。。。你代码中的蓝色导航条在哪里?!此外,我们还需要myscript.JS中的JS蓝色导航栏的代码位于。navbari如果您发布图像,您的代码应该与图像类似。。。在你的html代码中没有“联系人”、“主页”….我删除了主页和联系人等,因为它不是必需的,它只是ul列表的普通代码,我只想汉堡图标保留为地图的覆盖,但蓝色导航条消失了。对不起,这是我的错误。我直接将你的代码复制到我的编辑器中,但它不起作用,因为我以为你已经发布了一个原始html代码,但是你的css不在样式标签中,所以它不起作用。我尝试了添加Hamburger js代码并将position:absolute添加到我的css中的代码,但仍然不起作用。它使导航栏上的汉堡包消失了。还有其他方法吗?请查看我的示例中的控件:这里是css:
.navbar{
position: absolute;
background-color: #3b5998;
overflow:hidden;
height:63px;
}