Question

我正在尝试在带有液体布局的页面中加载谷歌地图。

这是我的 index.php 页面的CSS：

html, body {
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: fixed;
    font: normal 13px/150% Arial, Helvetica, sans-serif;
}
#div1 {
    width: 50%;
    height: 50%;
    float: left;
    background: #DDD;
    overflow: scroll;
}
#div2 {
    width: 50%;
    height: 100%;
    float: right;
    background: #AAA;
    overflow: scroll;
}
#div3 {
    width: 50%;
    height: 50%;
    float: left;
    background: #777;
    overflow: scroll;
}

我的地图包含在另一个页面中 map.php 以下是我的map.php页面的内容：

<html>
<head>
    <style type="text/css">
        html { width: 100%; height: 100%; }
        body { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; }
        #map { width: 100%; height: 100%; border: 0px; padding: 0px; }
    </style>

    <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
    <script type="text/javascript">
      // google map code
    </script>
</head>

<body onload="initMap()">
    <div id="map"></div>
</body>

当我从map.php打开它时，地图工作得很好。但是当我尝试在index.php的 div＃2 中加载它时，我看到的只是一个灰色区域。

我不知道导致问题的是什么。非常感谢你的帮助。谢谢！

编辑：

<?php
    // include db connect class
    require_once 'db_connect.php';

    // connecting to db
    $db = new DB_CONNECT();
?>

        <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
        <script type="text/javascript">
            // google map code with a query inside
        </script>

        <div id="map"></div>

地图仍未显示。

Answer 1

问题出在这里......

<body onload="initMap()">

如果该页面是通过body.onload加载的，则您不会收到此ajax事件。 body.onload仅在加载或刷新原始页面（index.php）时触发一次。使用ajax加载到此页面的任何内容都不会获得另一个body.onload事件。（这是ajax的要点之一，即在没有页面刷新的情况下加载内容。）

要解决此问题，请使用the .load() callback function ... ajax加载完成后，它会触发。

$("#div2").load('map.php', function() { // put init inside the callback initMap(); });

我还会重新考虑map.php的HTML，因此您不会在index.php上找到无效的HTML。换句话说，您不能拥有<html></html>内<head></head>，<body></body>和<div>标记的有效HTML。

将您的CSS移至全局CSS文件或head的{{1}}，而您的index.php页面应仅包含以下内容：

map.php

谷歌地图没有显示div内部液体布局

1 个答案: