谷歌地圖API不顯示地圖上的頁面不確定爲什麼

它現在是固定的，我猜Twitter的Bootstrap CSS必須與高度和寬度設置爲100％相沖突。留下任何有類似問題的人。谷歌地圖API不顯示地圖上的頁面不確定爲什麼

我想實現我的網頁上的谷歌地圖，當用戶點擊一個鏈接，所有的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>

下面是從頁

<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>

的view source和我的頁腳腳本

 <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>

來源

2013-03-03 Datsik

你在任何地方調用你的initialize（）函數嗎？ – OzBarry 2013-03-03 05:08:13

@OzBarry設法解決它，CSS令人傷心地：/謝謝。 – Datsik 2013-03-03 05:08:52

啊，沒問題。 – OzBarry 2013-03-03 05:10:43

它現在是固定的，我猜Twitter Bootstrap CSS必須與將高度和寬度設置爲100％相沖突。留下任何有類似問題的人。

來源

2013-03-03 05:40:24 Datsik

2天內不能接受我自己的答案。 – Datsik 2013-03-03 05:40:37

此外，你可能想看看這個：http://hpneo.github.com/gmaps/ – 2013-03-03 07:35:26

@ShaneReustle謝謝你。 – Datsik 2013-03-03 07:38:14

你說得對，該height:100%是問題，但它不是自舉一個神祕的衝突。您沒有足夠顯示您的代碼以確定哪些是錯誤的，但多次看到並經歷過類似的問題，我很清楚它可能是什麼。

我懷疑在初始化地圖時，hero-unit元素尚未被賦予高度或寬度，因此其高度爲零。因此，map_canvas元素的高度也爲零。畢竟，零的100％是零。

當您撥打new google.maps.Map()時，它會使用您給它的map_canvas元素的當前高度（即零）創建地圖。這不太好。

即使你以後給hero-unit的高度，不解決它。當然，height:100%現在會導致map_canvas也調整大小以匹配，但Maps API不知道發生了這種情況！

可以解決這個問題不管是你後沒有通過在進行此調用給你map_canvas元素一個明確的高度，或者該元素被調整大小：

google.maps.event.trigger(map, 'resize');

這告訴地圖API來看看新的元素大小並相應地調整。如果您想要可調整大小的地圖，也可以撥打電話：偵聽地圖元素上的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，你可以在元素選項卡樹視圖中找到你的map_canvas，並查看它的計算樣式 - 在那裏你會發現高度爲零。

另外，在調試Maps API代碼時，您可以省去一些麻煩完全忽略了您的PHP代碼。 Maps API是一個JavaScript API。它沒有看到你的PHP代碼;它甚至不知道你用PHP寫了你的網站。它看到的僅僅是傳遞給瀏覽器的最終HTML/CSS/JavaScript代碼。

最後，它看起來像兩次加載Maps API，首先是內聯腳本，後來是異步方法。一旦充足。除非需要異步加載，否則爲了簡單起見，我會堅持使用內聯腳本。

來源

2013-03-03 09:43:25

谷歌地圖API不顯示地圖上的頁面不確定爲什麼

回答

相關問題