0
我正在嘗試製作一個完整頁面的谷歌地圖頁面，頁腳始終位於底部。Google maps＆Foundation Zurb - 地圖顯示不正確
我使用標籤樣式頁面作爲其他內容的鏈接，並且地圖位於最後一個選項卡上。如果我把代碼放在所有標籤上，它就能完美地工作。只是在它沒有顯示的選項卡內。
目前我把頁腳底部的方法是使用：
.pagewrap {
height: 100%;
margin-bottom: -58px;
}
.pagewrap:after {
content: "";
display: block;
}
.footer {
height: 58px;
}
所以頁腳保持在底部所有的時間。
這是我使用的頁面代碼：
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
<link rel="stylesheet" href="css/foundation.css" />
<style>
#map-canvas {
height: 100%;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script src="js/vendor/modernizr.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="pagewrap">
<div class="row">
<div class="large-12 columns">
<div class="tabs-content">
<div class="content active" id="panel2-1">
<div class="panel" style="border:none;">
<h3>Page title 1</h3>
</div>
</div>
<div class="content" id="panel2-2">
<div class="panel" style="border:none;">
<h3>Page title 2</h3>
</div>
<dl class="accordion" data-accordion>
<dd>
<a href="#panel1">Demo accordian</a>
<div id="panel1" class="content">
Content for the first task lalalalala
</div>
</dd>
<dd>
<a href="#panel2">Demo accordian</a>
<div id="panel2" class="content">
Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</dd>
<dd>
<a href="#panel3">Demo accordian</a>
<div id="panel3" class="content">
Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</dd>
<dd>
<a href="#panel4">Demo accordian</a>
<div id="panel4" class="content">
Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</dd>
<dd>
<a href="#panel5">Demo accordian</a>
<div id="panel5" class="content">
Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</dd>
</dl>
</div>
<div class="content" id="panel2-3">
<div class="panel" style="border:none;">
<h3>Page title</h3>
</div>
</div>
<div class="content" id="panel2-4">
<div class="panel" style="border:none;">
<h3>PAge title</h3>
</div>
<div id="map-canvas"></div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<dl class="tabs" data-tab>
<dd class="active"><a href="#panel2-1"><img src="img/home.png" class="footer-icon"></a></dd>
<dd><a href="#panel2-2"><img src="img/file.png" class="footer-icon"></a></dd>
<dd><a href="#panel2-3"><img src="img/camera.png" class="footer-icon"></a></dd>
<dd><a href="#panel2-4"><img src="img/location.png" class="footer-icon"></a></dd>
</dl>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
任何想法？
聽起來就像是「零尺寸圖」的問題（與標籤常見的問題，當在初始化時地圖是隱藏的） 。當我嘗試運行您的發佈代碼時，我收到了javascript錯誤。 – geocodezip
是的，我在基金會支持論壇上看到了一些有相同問題但沒有發佈代碼來解決問題的帖子。 – CustomNet
看起來像這篇文章將幫助你： http://stackoverflow.com/questions/20746698/postpone-google-maps-initialisation-until-after-bootstrap-tab-is-shown –