您已在此页面上多次包含 Google 地图 JavaScript API。这可能会导致意外错误

Question

我正在创建一个具有多个选项卡的 web 应用程序。 我想在每个选项卡中都有谷歌地图脚本，显示 map 等。我收到错误：您已在此页面上多次包含谷歌地图 JavaScript API。 这可能会导致意外错误。 当尝试像这样使用它时：

在 index.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;
}

如何为多个选项卡使用相同的脚本/键？

Answer 1

看起来您包含同一脚本的两个不同版本。 代替：

  <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 调用，我猜是第一个。

Answer 2

我通过在另一个 mapapi 文件中创建一个新的map变量来解决此问题： mapapi0.js我称之为map0 。 然后我需要将#map-canvas { height: 460px }和<div id="map-canvas"></div>更改为 map canvas 并在index.html

您已在此页面上多次包含 Google 地图 JavaScript API。这可能会导致意外错误

问题描述

2 个解决方案

解决方案1
0 2020-06-03 17:50:53

解决方案2
-1 2020-06-03 22:55:01

您已在此页面上多次包含 Google 地图 JavaScript API。 这可能会导致意外错误

问题描述

2 个解决方案

解决方案1 0 2020-06-03 17:50:53

解决方案2 -1 2020-06-03 22:55:01

您已在此页面上多次包含 Google 地图 JavaScript API。这可能会导致意外错误

解决方案1
0 2020-06-03 17:50:53

解决方案2
-1 2020-06-03 22:55:01