4

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

2 回答 2

2

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

于 2013-03-03T05:40:24.747 回答
1

你是对的，这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 查看新元素大小并进行相应调整。如果您想要一个可调整大小的地图，这也是调用：监听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在 Elements 选项卡树视图中找到您的并查看它的 Computed Styles - 您会发现高度为零。

此外，在调试 Maps API 代码时完全忽略您的 PHP 代码，可以省去一些麻烦。地图 API 是一种 JavaScript API。它看不到您的 PHP 代码；它甚至不知道您用 PHP 编写了您的网站。它所看到的只是交付给浏览器的最终 HTML/CSS/JavaScript 代码。

最后，您似乎加载了两次 Maps API，第一次使用内联脚本，然后使用异步方法。一次就足够了。为了简单起见，我会坚持使用内联脚本，除非您需要异步加载。

于 2013-03-03T09:43:25.233 回答