我正在创建一个具有多个选项卡的Web应用程序。我想在每个选项卡中都有谷歌地图脚本，显示地图等。我收到错误：您在此页面上多次包含Google Maps JavaScript API。这可能会导致意外错误。尝试像这样使用它时：
在索引中.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>West Chester Places</title>
<link rel="stylesheet" type="text/css" href="css.css">
<link rel="icon" type="image/x-icon" href="mapIcon.png">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAc0XJsW7RZN6i2BbKsEVBX5ONt2rKkQGY"></script>
</head>
<body style="padding: 20px">
<div class="tabContainer">
<div class="buttonContainer">
<button onclick="showPanel(0,'#7851a9')"><strong>Food</strong></button>
<button onclick="showPanel(1,'#7851a9')"><strong>Bars/Nightlife</strong></button>
<button onclick="showPanel(2,'#7851a9')"><strong>Other</strong></button>
<button onclick="showPanel(3,'#7851a9')">Tab 4</button>
</div>
<div class="tabPanel">
<style type="text/css">
html { height: auto; }
body { height: auto; margin: 0; padding: 0 }
#infobox { margin: 0px }
#map-canvas { height: 460px }
</style>
<script type="text/javascript" src="mapapi.js"></script>
<div class ="centerText">
<center>
<p>Come take a look at my favorite places in West Chester!</p>
<p>Fun with Google Maps API <font size="3"><a href="https://github.com/rmcgarry3/FavWCPlaces" target="blank">(Source Code Here)</a></font></p>
</center>
</div>
<div id="map-canvas"></div>
</div>
<div class="tabPanel">
<style type="text/css">
html { height: auto; }
body { height: auto; margin: 0; padding: 0 }
#infobox { margin: 0px }
#map-canvas { height: 460px }
</style>
<script async defer type="text/javascript" src="mapapi.js"></script>
<div class ="centerText">
<center>
<p>Come take a look at my favorite places in West Chester!</p>
<p>Fun with Google Maps API <font size="3"><a href="https://github.com/rmcgarry3/FavWCPlaces" target="blank">(Source Code Here)</a></font></p>
</center>
</div>
<div id="map-canvas"></div>
</div>
<div class="tabPanel">
<style type="text/css">
html { height: auto; }
body { height: auto; margin: 0; padding: 0 }
#infobox { margin: 0px }
#map-canvas { height: 460px }
</style>
<script async defer type="text/javascript" src="mapapi.js"></script>
<div class ="centerText">
<center>
<p>Come take a look at my favorite places in West Chester!</p>
<p>Fun with Google Maps API <font size="3"><a href="https://github.com/rmcgarry3/FavWCPlaces" target="blank">(Source Code Here)</a></font></p>
</center>
</div>
<div id="map-canvas"></div>
</div>
<div class="tabPanel">
<style type="text/css">
html { height: auto; }
body { height: auto; margin: 0; padding: 0 }
#infobox { margin: 0px }
#map-canvas { height: 460px }
</style>
<script async defer type="text/javascript" src="mapapi0.js"></script>
<div class ="centerText">
<center>
<p>Come take a look at my favorite places in West Chester!</p>
<p>Fun with Google Maps API <font size="3"><a href="https://github.com/rmcgarry3/FavWCPlaces" target="blank">(Source Code Here)</a></font></p>
</center>
</div>
<div id="map-canvas"></div>
</div>
</div>
<script src="myScript.js"></script>
</body>
</html>
在mapapi中.js：
function initialize() {
var mapOptions = {
center: {
lat: 39.9545904,
lng: -75.6029956
},
zoom: 16
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var bonBonInfo = new google.maps.InfoWindow({
content: '<div id="infobox">' +
'<h1>Square One Bar</h1><h2>1400 S Michigan Ave</h2>' +
'</div>'
});
var masInfo = new google.maps.InfoWindow({
content: '<div id="infobox">' +
'<h1 class="title">My Home!</h1><h2>18th St & Michigan ave</h2>' +
'</div>'
});
var loveAgainInfo = new google.maps.InfoWindow({
content: '<div id="infobox">' +
'<h1 class="title">Dusek's Punch Bar</h1><h2>1227 W 18th Street</h2>' +
'</div>'
});
var diaDoceInfo = new google.maps.InfoWindow({
content: '<div id="infobox">' +
'<h1 class="title">Mercer 113</h1><h2>113 W Hubbard Street</h2>' +
'</div>'
});
var bonBon = new google.maps.Marker({
position: {
lat: 39.959006,
lng: -75.607625
},
map: map,
title: 'Bon Bon Sushi'
});
var mas = new google.maps.Marker({
position: {
lat: 39.960265,
lng: -75.603004
},
map: map,
title: 'Más Mexicali Cantina'
});
var loveAgain = new google.maps.Marker({
position: {
lat: 39.958445,
lng: -75.605327
},
map: map,
title: 'Love Again Local'
});
var diaDoce = new google.maps.Marker({
position: {
lat: 39.958586,
lng: -75.603630
},
map: map,
title: 'Dia Doce Gourmet Cupcakes'
});
google.maps.event.addListener(bonBon, 'click', function() {
GuidedTour();
});
google.maps.event.addListener(mas, 'click', function() {
GuidedTour();
});
google.maps.event.addListener(loveAgain, 'click', function() {
GuidedTour();
});
google.maps.event.addListener(diaDoce, 'click', function() {
GuidedTour();
});
function GuidedTour() {
diaDoceInfo.close(map, loveAgain);
map.panTo(mas.getPosition());
masInfo.open(map, mas);
window.setTimeout(function() {
map.panTo(bonBon.getPosition());
masInfo.close(map, mas);
bonBonInfo.open(map, bonBon);
}, 6000)
window.setTimeout(function() {
map.panTo(loveAgain.getPosition());
bonBonInfo.close(map, bonBon);
loveAgainInfo.open(map, loveAgain);
}, 11000)
window.setTimeout(function() {
map.panTo(diaDoce.getPosition());
loveAgainInfo.close(map, loveAgain);
diaDoceInfo.open(map, diaDoce);
}, 16000)
}
}
google.maps.event.addDomListener(window, 'load', initialize);
...
在 myScript 中.js：
var tabButtons = document.querySelectorAll(".tabContainer .buttonContainer button");
var tabPanels = document.querySelectorAll(".tabContainer .tabPanel");
function showPanel(panelIndex, colorCode) {
tabButtons.forEach(function(node) {
node.style.backgroundColor = "";
node.style.color = "";
});
tabButtons[panelIndex].style.backgroundColor = colorCode;
tabButtons[panelIndex].style.color = "white";
tabPanels.forEach(function(node) {
node.style.display = "none";
});
tabPanels[panelIndex].style.display = "block";
tabPanels[panelIndex].style.backgroundColor = colorCode;
}
showPanel(0, '#7851a9');
css.css：
.title{
font-family: arial;
color: #000000;
text-align: center;
}
.tabContainer{
width: 100%;
height: 350px;
}
.tabContainer .buttonContainer{
height: 15%;
}
.tabContainer .buttonContainer button{
width: 25%;
height: 100%;
float: left;
border: none;
outline:none;
cursor: pointer;
padding: 10px;
font-family: arial;
font-size: 18px;
background-color: #eee;
}
.tabContainer .buttonContainer button:hover{
background-color: #d7d4d4;
}
.tabContainer .tabPanel{
height: 85%;
background-color: gray;
color: white;
text-align: center;
padding-top: 25px;
padding-bottom: 700px;
box-sizing: border-box;
font-family: sans-serif;
font-size: 22px;
display: none;
}
.centerText {
font-size: 5;
font-family: arial;
padding-bottom: 25px;
}
如何为多个选项卡使用相同的脚本/键？
看起来您正在包含同一脚本的两个不同版本。而不是：
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_HERE"></script>
<script type="text/javascript" src="mapapi.js"></script>
您要选择其中一行。如果您进行多个 API 调用，我猜第一个。
我通过在另一个mapapi文件中创建一个新的map变量来解决此问题：我称之为map0mapapi0.js。然后我需要更改#map-canvas { height: 460px }并<div id="map-canvas"></div>到具有新 id 的地图画布index.html.