Question

我正在使用[this] [1]教程在我的网页上呈现Google地图。当我按照本教程中的方式使用它时，它可以正常工作。但是它没有显示在我的网页上。

我有一个选项卡式网页。每个选项卡内容都使用包含其ID的div打开。因此，当我将带有映射ID的div放入渲染地图功能用来渲染地图的div时，它位于“实时地图”标签的div内。而且它不起作用。

这是我的代码：

在我的网页上标记了HTML：

<div class="tab"> //tabs defined
  <button class="tablinks" onclick="openCity(event, 'tab1')">tab1</button>
  <button class="tablinks" onclick="openCity(event, 'tab2')">tab2</button>
  <button class="tablinks" onclick="openCity(event, 'Live-Map')">Live Map</button>
</div>

<div id="Live-Map" class="tabcontent"> //map div inside tab div
<div id="map"></div>  //map div
</div>

<script> // tab selector js function
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>

编辑

CSS

这是CSS。从其他来源尝试解决方案，我发现父div的高度需要设为100％。我也这样做了，但还是没有成功。

 #map {
   height: 100%;
 }
#Live-Map {
   height: 100%;
 }
 /* Optional: Makes the sample page fill the window. */
 html, body {
 height: 100%;
 margin: 0;
 padding: 0;
}

编辑

我用位搜索解决了这个问题。问题基本上是必须给包装div的高度和宽度也要100％，也要给bootstrap容器div。由于Google API需要这些参数才能呈现，所以

 #Live-Map, #map {
       height: 100%;
        width: 100%;
     }
   /* Optional: Makes the sample page fill the window. */
     html, body {
     height: 100%;
     width: 100%;
     margin: 0;
     padding: 0;
}

<div style="Height:100%; Width:100%;" class="container-fluid">

Answer 1

如果在首次演示期间看不到地图，则该地图将无法工作..在这种情况下，您可以在openCity函数中直接添加initMap的代码

    function openCity(evt, cityName) {

    var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(60.378920, 24.741850),
          zoom: 7
        });

    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

谷歌地图不呈现在嵌套的div

1 个答案: