当我在我的网页上展开我的导航面板时,谷歌地图不会出现任何内容,它只显示为灰色。只有当我打开控制台时才会显示地图。我需要更改为我的代码,以便地图显示其标记和我编程的位置。当您将地图放置在面板外时,它可以完美地完成。如果有人可以扩展我编写的代码以帮助那将是伟大的。
HTML代码:
<button class="accordion">Navigation</button>
<div class="panel">
<div id="map" style="width:60%;height:300px"></div>
</div>
CSS Code:
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
display: none;
background-color: white;
}
div.panel.show {
display: block;
}
脚本代码:
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
</script>
<script>
function myMap() {
var mapCanvas = document.getElementById("map");
var myCenter = new google.maps.LatLng(51.508742,-0.120850);
var mapOptions = {center: myCenter, zoom: 15};
var map = new google.maps.Map(mapCanvas,mapOptions);
var marker = new google.maps.Marker({
position: myCenter,
icon: "poi.png"
});
marker.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB37us778WYnwNjHftUm3oL2oduV_WOt_E&callback=myMap"></script>
答案 0 :(得分:1)
您的手风琴演出处理程序需要触发地图调整大小:
google.maps.event.trigger(map, "resize");
第一个脚本块的代码变为:
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
google.maps.event.trigger(map, "resize"); //added
}
}
</script>
工作小提琴:https://jsfiddle.net/vv0xtbrw/ (见第14行);