Question

现在已修复，我猜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>

Answer 1

现在已修复，我猜Twitter Bootstrap CSS必须与设置高度和宽度冲突到100％。留给任何有类似问题的人。

Answer 2

height:100%问题是对的，但这与Bootstrap不是一个神秘的冲突。您没有显示足够的代码以确定错误，但多次看到和遇到类似的问题，我很清楚它可能是什么。

我怀疑在初始化地图时，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' );

告诉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元素。对于此错误，您可以在“元素”选项卡树视图中找到map_canvas并查看其“计算样式” - 您可以在其中找到高度为零。

此外，通过完全忽略您的PHP代码调试Maps API代码时，可省去一些麻烦。 Maps API是一个JavaScript API。它没有看到你的PHP代码;它甚至不知道你用PHP编写了你的网站。它看到的只是提供给浏览器的最终HTML / CSS / JavaScript代码。

最后，看起来您正在加载Maps API两次，首先使用内联脚本，然后使用异步方法。一次就够了。除非你需要异步加载，否则我会坚持使用内联脚本。

谷歌地图API没有在页面上显示地图，不知道为什么

2 个答案: