在我的网站上，我的地图显示完美。然而，我设置的标记位于它应该的位置，但是当你从手风琴加载地图时，地图显示远离我编程去的特定位置和标记。为什么要这样做，我该怎么做呢？
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta charset = "utf-8">
<title>London Tour Guide</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="jquery.js"></script>
<style>
div.container { position: absolute; top: 10px; left: 400px; width: 720px; height: 1300px;
background-color: white; }
div.content {
width: 700px; height: 1200px;
background-color: lightblue; padding: 5px; }
h1.welcome {font-family: Verdana, sans-serif; color: orangered;
text-align: center; text-shadow: 2px 2px Grey;
transition: 4s;}
h1.stpauls{font-family: Verdana, sans-serif; color: orangered;
text-align: center;
}
h1.welcome:hover{transform: rotateX(360deg); color:yellow; }
p.medium {
font-size: 12pt;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #333;
}
p.small {
font-size: 12pt;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #333;
}
img {
display: block;
margin: auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropbtn1 {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn1:hover, .dropbtn1:focus {
background-color: #3e8e41;
}
.dropdown1 {
position: relative;
display: inline-block;
}
.dropdown1-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown1-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown1-content a:hover {background-color: #f1f1f1}
.show{display:block;}
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;
}
</style>
</head>
<body>
<div class="container">
<div class = "content">
<div class = "header">
<img src = "headerlondon.jpg" alt = "header"></div>
<ul>
<li><a class="active" href="Project.html">Home</a></li>
<li><a href="Map.html">Maps </a></li>
<li class="dropdown">
<a href="#" class="travel">Travel <i class="fa fa-caret-down"></i></a>
<div class="dropdown-content">
<a href="Bus.html">Bus</a>
<a href="Taxi.html">Taxi</a>
<a href="Tube.html">Tube</a>
</div>
</li>
<li class="dropdown">
<a href="#" class="sightseeing">SightSeeing <i class="fa fa-caret-down"></i></a>
<div class="dropdown-content">
<a href="LondonEye.html">London Eye</a>
<a href="TowerofLondon.html">Tower of London</a>
<a href="BigBen.html">Big Ben</a>
<a href="StPaulsCathedral.html">St Pauls Cathedral</a>
<a href="BuckinghamPalace.html">Buckingham Palace</a>
<a href="WestMinister.html">WestMinister</a>
</div>
</li>
<li class="dropdown">
<a href="#" class="Museums">Museums <i class="fa fa-caret-down"></i></a>
<div class="dropdown-content">
<a href="BritishMuseum.html">British Museum</a>
<a href="ScienceMuseum.html">Science Museum</a>
<a href="NationalHistoryMuseum.html">National History Museumm</a>
</div>
</li>
</ul>
<button class="accordion">Navigation</button>
<div class="panel">
<div id="map" style="left:150px;width:60%;height:300px"></div>
</div>
</div>
<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>
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");
}
}
function myMap() {
var mapCanvas = document.getElementById("map");
var myCenter = new google.maps.LatLng(51.508742, -0.120850);
var mapOptions = {
center: myCenter,
zoom: 10
};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: myCenter
});
marker.setMap(map);
setTimeout(function () {
console.log(1);
google.maps.event.trigger(map, "resize");
}, 1000);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB37us778WYnwNjHftUm3oL2oduV_WOt_E&callback=myMap"></script>
</div>
</body>
</html>
答案 0 :(得分：1)
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB37us778WYnwNjHftUm3oL2oduV_WOt_E&callback=myMap"></script>
从myMap
callback
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB37us778WYnwNjHftUm3oL2oduV_WOt_E"></script>
...并将其放入click事件。
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
myMap();
}
另外，为什么你有for (i = 0; i < acc.length; i++)的两个循环，如果你打算为手风琴设置动画，你可能需要在完成动画后调用myMap。
工作代码
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta charset = "utf-8">
<title>London Tour Guide</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="jquery.js"></script>
<style>
div.container { position: absolute; top: 10px; left: 400px; width: 720px; height: 1300px;
background-color: white; }
div.content {
width: 700px; height: 1200px;
background-color: lightblue; padding: 5px; }
h1.welcome {font-family: Verdana, sans-serif; color: orangered;
text-align: center; text-shadow: 2px 2px Grey;
transition: 4s;}
h1.stpauls{font-family: Verdana, sans-serif; color: orangered;
text-align: center;
}
h1.welcome:hover{transform: rotateX(360deg); color:yellow; }
p.medium {
font-size: 12pt;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #333;
}
p.small {
font-size: 12pt;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #333;
}
img {
display: block;
margin: auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropbtn1 {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn1:hover, .dropbtn1:focus {
background-color: #3e8e41;
}
.dropdown1 {
position: relative;
display: inline-block;
}
.dropdown1-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown1-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown1-content a:hover {background-color: #f1f1f1}
.show{display:block;}
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;
}
</style>
</head>
<body>
<div class="container">
<div class = "content">
<div class = "header">
<img src = "headerlondon.jpg" alt = "header"></div>
<ul>
<li><a class="active" href="Project.html">Home</a></li>
<li><a href="Map.html">Maps </a></li>
<li class="dropdown">
<a href="#" class="travel">Travel <i class="fa fa-caret-down"></i></a>
<div class="dropdown-content">
<a href="Bus.html">Bus</a>
<a href="Taxi.html">Taxi</a>
<a href="Tube.html">Tube</a>
</div>
</li>
<li class="dropdown">
<a href="#" class="sightseeing">SightSeeing <i class="fa fa-caret-down"></i></a>
<div class="dropdown-content">
<a href="LondonEye.html">London Eye</a>
<a href="TowerofLondon.html">Tower of London</a>
<a href="BigBen.html">Big Ben</a>
<a href="StPaulsCathedral.html">St Pauls Cathedral</a>
<a href="BuckinghamPalace.html">Buckingham Palace</a>
<a href="WestMinister.html">WestMinister</a>
</div>
</li>
<li class="dropdown">
<a href="#" class="Museums">Museums <i class="fa fa-caret-down"></i></a>
<div class="dropdown-content">
<a href="BritishMuseum.html">British Museum</a>
<a href="ScienceMuseum.html">Science Museum</a>
<a href="NationalHistoryMuseum.html">National History Museumm</a>
</div>
</li>
</ul>
<button class="accordion">Navigation</button>
<div class="panel">
<div id="map" style="left:150px;width:60%;height:300px"></div>
</div>
</div>
<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>
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");
myMap();
google.maps.event.trigger(map, "resize");
}
}
function myMap() {
var mapCanvas = document.getElementById("map");
var myCenter = new google.maps.LatLng(51.508742, -0.120850);
var mapOptions = {
center: myCenter,
zoom: 10
};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: myCenter
});
marker.setMap(map);
setTimeout(function () {
console.log(1);
google.maps.event.trigger(map, "resize");
}, 1000);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB37us778WYnwNjHftUm3oL2oduV_WOt_E"></script>
</div>
</body>
</html>