Question

我正在尝试制作移动应用程序，其中屏幕的某些部分覆盖了一些图片，而另一部分则覆盖了谷歌地图。

下面是代码：

HTML：

<div class="container-fluid">

  <div class="row">      
    <img id="map-pic" class="img-responsive"  src="http://placehold.it/100x140"/>
    <h4 id="map-text" class="text-center"><strong>Title of the picture</strong></h4>
  </div>

  <div class="row">
    <div id="map"></div>

  <script>
  var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 32.156186, lng: 119.131371},
    zoom: 10
  });
}
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=&AIzaSyC1c2qJxUcmMzZQdk3yl1p0FhT4pxYgqx4&callback=initMap"
        async defer></script>
    </div>
</div>

CSS：

#map{
  width: 100%;
  height: 100%;
}
#map-pic{
  float:left;
}
#map-text{
  padding-top:5rem;
}

问题是地图的高度变得与整个屏幕的高度相同，而不是填充空白空间。我怎么能解决这个问题？

Answer 1

您可以尝试以下解决方案，这对我来说可以用地图填充页面的其余部分。有些解决方案将溢出设置为隐藏，但这些方法的危险在于隐藏了使用条款和Google徽标（不太好！）。

的CSS：

body {
    margin: 0px;
    padding: 0px;
}
#map {
  width: 100%;
  height: 100%;
}
#container-fluid
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #DDD;
    padding-top: 200px;
}
#header
{
    background-color: #FFF;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

体：

<div id="container-fluid">
    <div id="header">
        <img id="map-pic" class="img-responsive"  src="http://placehold.it/100x140"/>
    <h4 id="map-text" class="text-center"><strong>Title of the picture</strong></h4>
    </div>
    <div id="map"></div>
    <script>
    var map;
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 32.156186, lng: 119.131371},
        zoom: 10
      });
    }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=&AIzaSyC1c2qJxUcmMzZQdk3yl1p0FhT4pxYgqx4&callback=initMap" async defer></script>
</div>

这在旧的IE浏览器（6及之前版本）中不起作用，但我不担心。我想唯一的缺点是标题是一个固定的高度，当你改变高度时，你还必须改变#container-fluid的填充。

如何使谷歌地图适合移动设备屏幕

1 个答案: