Javascript 引导下拉菜单按钮未与传单地图一起显示
我正在尝试创建一个带有引导按钮的地图。我让地图全屏显示,并把按钮放在上面。代码如下:Javascript 引导下拉菜单按钮未与传单地图一起显示,javascript,html,css,bootstrap-4,leaflet,Javascript,Html,Css,Bootstrap 4,Leaflet,我正在尝试创建一个带有引导按钮的地图。我让地图全屏显示,并把按钮放在上面。代码如下: <!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
<!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: '© <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">
显示下拉按钮和后退按钮,但不显示下拉菜单中的元素
<script src="static/bootstrap/js/bootstrap.min.js"></script>
这是一个引导脚本文件,用于使菜单和其他与js相关的功能正常工作。但是为了让它工作,它需要有一个DOM文档对象模型。您当前拥有的是在jQuery之后在顶部触发的脚本,没有任何DOM元素供它使用,菜单元素还没有被解析
在你合上标签之前,试着把这个放在正确的位置。这应该可以让菜单元素正常工作。我已经为您解决了这个问题,原因不止一个,首先是引导链接错误,其次是在错误的id下拉按钮上添加了错误的样式,所以按钮显示在页脚,所以您看不到它,下面是完整的代码,其中包含编辑一些文件、位置和URL,以及从下拉列表到父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: '© <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>