1
具体来说,我试图做一个下拉菜单填充链接,当点击时将直接指向谷歌地图中的指定位置。我设法将谷歌地图嵌入到我的页面中,但出于某种原因,我似乎无法得到下降发生,并找不到我的代码中的问题。我也在努力理解如何在下拉菜单中实际创建链接以指向谷歌地图上的选定位置。任何帮助,将不胜感激。该代码我迄今为止...初学者用一个简单的下拉菜单努力
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show')
}
}
}
}
function initMap() {
var Columbia = {
lat: 34.006140,
lng: -81.037532
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: Columbia
});
var marker = new google.maps.Marker({
position: Columbia,
map: map
});
}
.dropbtn {
background-color: #4caf50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #f1f1f1
}
#map {
height: 400px;
width: 100%;
}
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5cD8oVYji2MWCAj8JzrAzQtpBy12W30o&callback=initMap">
</script>
<h3>Google Maps/Form Assignment</h3>
<div id="map"></div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Select a location</button>
<div id="myDropdown" class="dropdown-content">
<a href="#london">London, England</a>
<a href="#tokyo">Tokyo, Japan</a>
<a href="#newyork">New York City, USA</a>
</div>
</div>
1)class dropdown-conte nt'显示为none,但没有为'show'类定义的样式,因此显示无法显示,2)您在document.getElementByClassName上有语法错误,将其替换为document.getElementsByClassName – nosthertus
我将发布你的解决方案的答案,给我一点时间 – nosthertus