实现选项卡下的谷歌地图地图答案

【问题标题】：google maps map under materialize tab实现选项卡下的谷歌地图地图
【发布时间】：2017-07-28 21:59:31
【问题描述】：

我试图通过动态更改内容来创建一个看起来很快的网站，所以我使用标签系统表单实现，一切都很好，除了我通过 api 生成的谷歌地图显示为空白窗口： 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%;
 }

【问题讨论】：

标签： javascript html css google-maps

【解决方案1】：

请试试这个代码。因为google在脚本执行时直接调用initMap()所以当时由于某种原因地图对象没有初始化所以我们需要像这样调用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
  });
}

希望这会有所帮助。

【讨论】：

【解决方案2】：

您需要在选项卡变为活动状态（并且地图具有大小）后触发地图上的resize 事件。

$('ul.tabs').on('click', 'a', function(e) {
  setTimeout(function() {
    google.maps.event.trigger(map, 'resize');
  }, 500);
});

代码 sn-p：

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
  });
}
$('ul.tabs').on('click', 'a', function(e) {
  setTimeout(function() {
    google.maps.event.trigger(map, 'resize');
  }, 500);
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet" />
<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?callback=initMap">
    </script>
  </div>

  <div id="test2" class="col s12">
    2
  </div>

</div>

【讨论】：