Question

我正在尝试在我的网站中放置两个地图，在可切换标签中。因此，当加载网站时，活动窗格地图加载正常，但是当我交换到另一个选项卡时，它只是保持灰色：

但是，如果我在智能手机上试用它，那就可以了：S。

嗯，这是我的代码，我希望你能帮助我：

DIVS：

        <div id="huelva" class="tab-pane fade">
          <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" style="padding-top: 10px">
            <div id="huelvamap" style="width:100%; height:300px; overflow: visible;"></div>
          </div> 
        ...

脚本：

      <script>
    function initMap() {
      // Create a map object and specify the DOM element for display.
      var map = new google.maps.Map(document.getElementById('ceutamap'), {
        center: {lat: 35.8889515, lng: -5.3535556},
        scrollwheel: false,
        zoom: 12
      });

      var map2 = new google.maps.Map(document.getElementById('huelvamap'), {
        center: {lat: 37.2709008, lng: -6.9571999},
        scrollwheel: false,
        zoom: 12
      });
    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=[api_key]&callback=initMap"
  async defer></script>

如果需要，我会上传网站，发布链接！

Here is the link to the site

提前致谢

Answer 1

好的，谢谢@Coder，他给了我一些有助于我解决问题的有趣信息：

事实是，每次选项卡处于活动状态（或显示）时，我都必须渲染地图，因此我为选项卡链接和这个简单的脚本代码添加了一个ID：

$(document).ready(function () { 
  $('#mapTab2').on('shown.bs.tab', function () { 
    var map2 = new google.maps.Map(document.getElementById('huelvamap'), {
      center: {lat: 37.2709008, lng: -6.9571999},
      scrollwheel: false,
      zoom: 12
    });
  });   

  $('#mapTab').on('shown.bs.tab', function () { 
    var map = new google.maps.Map(document.getElementById('ceutamap'), {
      center: {lat: 35.8889515, lng: -5.3535556},
      scrollwheel: false,
      zoom: 12
    });
  }); 
});

现在工作正常，你可以在链接上看到！

祝你好运

两个谷歌地图，其中一个加载灰色

1 个答案: