我将此资源用于我的网站:http://tympanus.net/codrops/2013/04/23/fullscreen-layout-with-page-transitions/ ,
下载链接:http://tympanus.net/Development/FullscreenLayoutPageTransitions/FullscreenLayoutPageTransitions.zip
我工作很好。
在第一部分(关于部分)。我添加这张 map :
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
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);
</script>
我删除了第一部分中类为“bl-content”的所有内容,并将其更改为 id : map :
<section>
<div class="bl-box">
<h2 class="bl-icon bl-icon-about">About</h2>
</div>
<div id="map" class="bl-content">
</div>
<span class="bl-icon bl-icon-close"></span>
</section>
已查看 map 。但它不是全尺寸的。我不知道为什么。我在这里犯了什么错误吗?
最佳答案
这更像是一个 CSS 问题。不要将 id 放在 .bl-content div 上。那是你的容器。您想在其中添加一个 div 并为其指定 map ID。
<section>
<div class="bl-box">
<h2 class="bl-icon bl-icon-about">About</h2>
</div>
<div class="bl-content">
<div id="map"></div>
</div>
<span class="bl-icon bl-icon-close"></span>
</section>
类 .bl-content 被定义为绝对定位,所以我们希望我们的 map 占据整个空间。所以将其添加到您的 css 文件中。
#map {
width: 100%;
height: 100%;
}
如果没有额外的工作,它不会延伸到浏览器的边缘,因为容器有一个填充分配给它。但它会填满整个容器。
关于javascript - 更改大小时,div 内的 map 不响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33748364/