javascript - 物化选项卡下的谷歌地图 map

Question

我试图通过动态更改内容来创建一个看起来很快的网站，因此我使用了标签系统表单实现，一切都很好，除了我的通过 api 生成的 google map map 显示为空白窗口: map

它会在我调整窗口大小时显示 map ，或者如果页面处于事件状态，则事件不是解决方案!

提前感谢可能的解决方案/修复

我创建了这个 JSFiddle 来展示它:https://jsfiddle.net/8ajob4ja/

html:

<div class="row">
     <div class="col s12">
       <ul class="tabs">
         <li class="tab col s6"><a href="#test1">Test 1</a></li>
         <li class="tab col s6"><a href="#test2" class="active">Test 2</a></li>
</ul>
      </div>
      <div id="test1" class="col s12">           
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <!-- Replace the value of the key parameter with your own API key. -->
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
    </script>
      </div>
      <div id="test2" class="col s12">
        2
      </div>
    </div>   

js:

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}

CSS:

#map {
  height: 400px;
  width: 100%;
 }

Answer 1

请尝试此代码。因为谷歌在执行脚本时直接调用 initMap() 所以当时由于某种原因 map 对象没有初始化 所以出于这个原因我们需要调用 initMap()像这样。

从 js 链接中删除 &callback=initMap，这样它看起来如下所示。

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>

在选项卡中添加类。

<li class="tab col s6 test"><a href="#test1">Test 1</a></li>

用这段代码替换你的 jquery。

$(".test").click(function () {initMap();});

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}

希望这对您有所帮助。