Question

因此，我正在尝试创建一个可在Google地图上显示位置的网站。我想将地图大小设置为用户屏幕大小的％。这适用于地图的宽度，但是当我尝试将高度设置为％时，地图会消失。我尝试将主体设置为100％宽度和100％高度，我尝试使用容器div，但我是html和CSS的新手，所以我不确定我还能尝试什么。

CSS就在这里;

#map {
    position: relative;
    width: 35%;
    height: 350px;
    background-color: #CCC;
    margin: 1% 0 0 15%;
    }

#map-container {
    height: 100%;
    width: 100%;
    }

我用于地图的代码是直接从https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map获取的，但如果需要，我可以上传完整的.html文档。

Answer 1

将所有包含元素的高度和宽度设置为：

width: 100%;
height: 100%;

Discussion in Mike Williams' Google Maps API v2 tutorial: Using a percentage height for the map div

proof of concept fiddle

代码段

function initialize() {
  var mapCanvas = document.getElementById('map');
  var mapOptions = {
    center: new google.maps.LatLng(44.5403, -78.5463),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map {
  width: 100%;
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

Answer 2

除非您拥有固定高度的父元素，否则无法设置HTML元素的百分比高度。

虽然现代浏览器通过关键字“vh”而不是“％”支持相对于视口的高度百分比。

否则你必须计算视口的高度，并用Javascript / jQuery设置元素的高度。

查看更多信息here

Answer 3

您的地图容器需要定义px高度才能在子元素上使用%高度。

尝试：

#map-container{
    height: 350px;
}

#map{
    height: 100%;
}

Answer 4

当且仅当您遇到地图细节和移动设备缩小的问题时，您才必须检查meta标签宽度设备宽度初始比例一个我发布此信息，因为我复制了开发人员所有的html，但其中不包含meta标签，有很多时间来解决它。否则所有％和像素大小都可以正常工作。

将谷歌地图的大小设置为屏幕大小的百分比？

4 个答案: