自定义 Google 地图未显示在第二个选项卡中

Question

我对 Google Maps api 有疑问。 我有两个选项卡，一个在显示另一个选项卡时隐藏，我无法在第二个选项卡中显示地图。

我做了一个 JSFiddle 给你看：https://jsfiddle.net/7fywbck9/

function openMap(evt, mapName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent_map" and hide them
  tabcontent = document.getElementsByClassName("tabcontent_map");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks_map" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks_map");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the link that opened the tab
  document.getElementById(mapName).style.display = "block";
  evt.currentTarget.className += " active";

}

function initMaps() {
  var centre_france = {
    lat: 46.599923,
    lng: 2.432420
  };
  var mapFrance = new google.maps.Map(document.getElementById('mapFrance'), {
    zoom: 6,
    center: centre_france
  });
  var mapEtranger = new google.maps.Map(document.getElementById('mapEtranger'), {
    zoom: 6,
    center: centre_france
  });
  var locationsFrance = [
    ['Bureaux à Plérin', 48.541236, -2.778751],
    ['Bureaux à Arras', 50.290853, 2.777303],
    ['Bureaux à Grenoble', 45.184039, 5.722752],
    ['Sarthe', 48.003300, 0.206723],
    ['Gironde', 44.836597, -0.581157],
    ['Vaucluse', 43.876778, 5.397163],
    ['Paris', 48.856579, 2.351521]
  ];
  var locationsEtranger = [
    ['Bureaux à Plérin', 48.541236, -2.778751],
    ['Bureaux à Arras', 50.290853, 2.777303],
    ['Bureaux à Grenoble', 45.184039, 5.722752],
    ['Nouvelle-Zélande', -42.425169, 172.390052],
    ['Guyane', 4.648057, -52.817376],
    ['République Dominicaine', 18.895404, -70.224045]
  ];
  var infowindow = new google.maps.InfoWindow();
  var marker, i;
  for (i = 0; i < locationsFrance.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locationsFrance[i][1], locationsFrance[i][2]),
      map: mapFrance
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locationsFrance[i][0]);
        infowindow.open(mapFrance, marker);
      }
    })(marker, i));
  }
  for (i = 0; i < locationsEtranger.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locationsEtranger[i][1], locationsEtranger[i][2]),
      map: mapEtranger
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locationsEtranger[i][0]);
        infowindow.open(mapEtranger, marker);
      }
    })(marker, i));
  }
}



document.getElementById("defaultOpen").click();

#mapFrance {
  height: 700px;
  width: 100%;
}

#mapEtranger {
  height: 700px;
  width: 100%;
}


/* Style the tab */

.tab_map {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}


/* Style the buttons that are used to open the tab content */

.tab_map button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  color: black;
}


/* Change background color of buttons on hover */

.tab_map button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */

.tab_map button.active {
  background-color: #ccc;
}


/* Style the tab content */

.tabcontent_map {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}

<script async defer src='https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMaps'></script>

<div class="tab_map">
  <button id="defaultOpen" class="tablinks_map" onclick="openMap(event, 'France')">ETA en France</button>
  <button class="tablinks_map" onclick="openMap(event, 'Etranger')">ETA à l'étranger</button>
</div>
<div id="France" class="tabcontent_map">
  <div id="mapFrance"></div>
</div>
<div id="Etranger" class="tabcontent_map">
  <div id="mapEtranger"></div>
</div>

我怀疑问题来自 CSS，但我不知道该怎么做才能使它正常工作。

提前致谢。

PS : 英语不是我的母语。

Answer 1

如果当前未显示 Google 地图，则不会加载它，因此当此选项卡使用 google.maps.event.trigger(MapInstance,'resize') 激活时，您必须在第二个选项卡中重新绘制地图

这是您的jsFiddle 的快速修复链接

 #mapFrance {
    height: 700px;
    width: 100%;
}

#mapEtranger {
    height: 700px;
    width: 100%;
} 
 
 /* Style the tab */
 
 .tab_map {
   overflow: hidden;
   border: 1px solid #ccc;
   background-color: #f1f1f1;
 }
 /* Style the buttons that are used to open the tab content */
 
 .tab_map button {
   background-color: inherit;
   float: left;
   border: none;
   outline: none;
   cursor: pointer;
   padding: 14px 16px;
   transition: 0.3s;
   color: black;
 }
 /* Change background color of buttons on hover */
 
 .tab_map button:hover {
   background-color: #ddd;
 }
 /* Create an active/current tablink class */
 
 .tab_map button.active {
   background-color: #ccc;
 }
 /* Style the tab content */
 
 .tabcontent_map {
   display: none;
   padding: 6px 12px;
   border: 1px solid #ccc;
   border-top: none;
   -webkit-animation: fadeEffect 1s;
   animation: fadeEffect 1s;
 }

<script>function openMap(evt, mapName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent_map" and hide them
  tabcontent = document.getElementsByClassName("tabcontent_map");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks_map" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks_map");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the link that opened the tab
  document.getElementById(mapName).style.display = "block";
  evt.currentTarget.className += " active";
  
  google.maps.event.trigger(mapEtranger,'resize')

}
</script>
<div class="tab_map">
  <button id="defaultOpen" class="tablinks_map" onclick="openMap(event, 'France')">ETA en France</button>
  <button class="tablinks_map" onclick="openMap(event, 'Etranger')">ETA à l'étranger</button>
</div>
<div id="France" class="tabcontent_map">
  <div id="mapFrance"></div>
</div>
<div id="Etranger" class="tabcontent_map">
  <div id="mapEtranger"></div>
</div>
<script>
var mapEtranger;
  function initMaps() {
    var centre_france = {
      lat: 46.599923,
      lng: 2.432420
    };
    var mapFrance = new google.maps.Map(document.getElementById('mapFrance'), {
      zoom: 6,
      center: centre_france
    });
    mapEtranger = new google.maps.Map(document.getElementById('mapEtranger'), {
      zoom: 6,
      center: centre_france
    });
    var locationsFrance = [
      ['Bureaux à Plérin', 48.541236, -2.778751],
      ['Bureaux à Arras', 50.290853, 2.777303],
      ['Bureaux à Grenoble', 45.184039, 5.722752],
      ['Sarthe', 48.003300, 0.206723],
      ['Gironde', 44.836597, -0.581157],
      ['Vaucluse', 43.876778, 5.397163],
      ['Paris', 48.856579, 2.351521]
    ];
    var locationsEtranger = [
      ['Bureaux à Plérin', 48.541236, -2.778751],
      ['Bureaux à Arras', 50.290853, 2.777303],
      ['Bureaux à Grenoble', 45.184039, 5.722752],
      ['Nouvelle-Zélande', -42.425169, 172.390052],
      ['Guyane', 4.648057, -52.817376],
      ['République Dominicaine', 18.895404, -70.224045]
    ];
    var infowindow = new google.maps.InfoWindow();
    var marker, i;
    for (i = 0; i < locationsFrance.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locationsFrance[i][1], locationsFrance[i][2]),
        map: mapFrance
      });
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locationsFrance[i][0]);
          infowindow.open(mapFrance, marker);
        }
      })(marker, i));
    }
    for (i = 0; i < locationsEtranger.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locationsEtranger[i][1], locationsEtranger[i][2]),
        map: mapEtranger
      });
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locationsEtranger[i][0]);
          infowindow.open(mapEtranger, marker);
        }
      })(marker, i));
    }
  }

</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCIADRO5W2CiaE48H4A4Mt8KFUt0eHtc4M&callback=initMaps"></script>
<script>
  document.getElementById("defaultOpen").click();
</script>

Answer 2

根据我对 Google Maps 的理解，我会说问题在于 google maps api 不喜欢 display:none。因此 google api 不会绑定到 display:none 元素。

您可以以其他方式隐藏元素或在单击函数上调用 initMaps()。这应该可以解决问题