谷歌地圖API沒有在頁面上顯示地圖，不知道為什么
[英]Google map API not showing map on page not sure why
問題描述
它現在已修復，我猜Twitter Bootstrap CSS必須與設置高度和寬度沖突到100％。 留給任何有類似問題的人。
我正在嘗試在用戶點擊鏈接時在我的網頁上實現谷歌地圖，所有PHP都正常工作但由於某種原因谷歌地圖沒有顯示，我重新閱讀了API文檔上的所有示例並重新閱讀所有代碼，但仍然不能確定為什么..
這是顯示地圖的頁面
注意：PHP工作正常，腳本在頁面加載時加載，但地圖不是。
<?php
/* Include header and config and set variable*/
require_once('config.inc.php');
require_once($rootdir . $dirsubfolder . 'navbar.php');
$route = $_GET['route'];
?>
<?php
/* User wants to retrieve their route */
if (isset($route)) {
?>
<?php
/* User wants Route 1 */
if (strcmp($route, "sunroute1") == 0) {
?>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=WORKINGKEYk&sensor=true&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
<?php
printf('worked');
} else { printf('failed'); }
?>
<div class="container">
<div class="hero-unit">
<div id="map_canvas" style="width: 100%; height: 100%"></div>
</div>
</div>
<?php
/* End isset(route) */
}
/* Include footer */
require_once($rootdir . $dirsubfolder . 'footer.php');
?>
在我的footer.php里面我有
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEYWORKING&sensor=false"></script>
這是頁面的view source
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=WORKING&sensor=true&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
worked
<div class="container">
<div class="hero-unit">
<div id="map_canvas" style="width: 100%; height: 100%"></div>
</div>
</div>
我的腳本在頁腳中
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=WORKING&sensor=false"></script>
</body>
</html>
2 個解決方案
解決方案1
2 已采納 2013-03-03 05:40:24
它現在已修復，我猜Twitter Bootstrap CSS必須與設置高度和寬度沖突到100％。 留給任何有類似問題的人。
解決方案2
1 2013-03-03 09:43:25
你是正確的： height:100%是問題，但它與Bootstrap不是一個神秘的沖突。 你沒有顯示足夠的代碼來確定錯誤，但多次看到並經歷過類似的問題，我很清楚它可能是什么。
我懷疑在你初始化你的地圖時， hero-unit元素還沒有給出高度或寬度，所以它的高度為零。 因此， map_canvas元素的高度也為零。 畢竟，零的100％為零。
當您調用new google.maps.Map() ，它會使用您提供的map_canvas元素的當前高度（即零new google.maps.Map()創建地圖。 這不是很好。
即使你后來給hero-unit一個高度，也不能解決它。 當然， height:100%現在會導致map_canvas也調整大小以匹配，但Maps API不知道發生了這種情況！
您可以通過為map_canvas元素提供顯式高度，或者通過在調整元素大小后進行此調用來解決此問題：
google.maps.event.trigger( map, 'resize' );
這告訴Maps API查看新元素大小並進行相應調整。 如果你想要一個可調整大小的地圖，也可以調用make：在地圖元素上監聽resize事件，並在事件觸發時進行調用。
為了說明，讓我們看一下代碼的一個非常簡化的版本，其中包含一些日志記錄：
<!DOCTYPE html>
<html>
<head>
<title>CSS Width and Height Test</title>
</head>
<body onload="test()">
<div id="container">
<div id="hero-unit">
<div id="map_canvas"
style="width: 100%; height: 100%"
></div>
</div>
</div>
<script>
function test() {
var hero = document.getElementById('hero-unit');
var canvas = document.getElementById('map_canvas');
console.log(
'Canvas size before setting hero size: ' +
canvas.offsetWidth + 'x' +
canvas.offsetHeight
);
hero.style.height = '300px';
hero.style.width = '400px';
console.log(
'Canvas size after setting hero size: ' +
canvas.offsetWidth + 'x' +
canvas.offsetHeight
);
}
</script>
</body>
</html>
保存該頁面並在開放式工具控制台打開的情況下在您喜歡的瀏覽器中查看它，以便查看日志消息。 例如，在Windows上的Chrome中，使用F12鍵打開開發人員工具，然后單擊“控制台”選項卡。
你應該看到這樣的東西（寬度值將取決於你的瀏覽器窗口的寬度）：
Canvas size before setting hero size: 1244x0 css-height.html:20
Canvas size after setting hero size: 400x300 css-height.html:29
如您所見，在其父級大小之前， map_canvas高度為零，其寬度大於您可能預期的大小。
一些相關評論：
如果您不習慣使用瀏覽器的開發人員工具，請花些時間熟悉它們。 特別是Chrome在該開發人員面板中擁有一套出色的工具。 您可以通過在任何地方添加此語句來在JavaScript代碼中設置斷點：
debugger;
或者通過查看開發人員工具中的源文件並單擊左邊距。 當瀏覽器在斷點處停止時，您可以檢查JavaScript變量和各種事物。 您可以使用開發人員工具面板中的“元素”選項卡隨時檢查DOM元素。 對於這個bug，您可以在Elements選項卡樹視圖中找到map_canvas並查看其Computed Styles - 您會發現高度為零。
此外，通過完全忽略您的PHP代碼來調試Maps API代碼時可以省去一些麻煩。 Maps API是一個JavaScript API。 它沒有看到你的PHP代碼; 它甚至不知道你用PHP編寫了你的網站。 它看到的只是提供給瀏覽器的最終HTML / CSS / JavaScript代碼。
最后，看起來您正在加載Maps API兩次，首先使用內聯腳本，然后使用異步方法。 一次就夠了。 除非您需要異步加載，否則我會堅持使用內聯腳本以簡化操作。
Adsense Google MAP API未顯示MAP
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.