-1

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

这是我的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>

地图仍然没有显示。

4

1 回答 1

0

问题就在这里...

<body onload="initMap()">

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

为了解决这个问题，利用回调.load()函数......加载完成后它会触发。ajax

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

我还将重新考虑 HTML，map.php这样您就不会在index.php. 换句话说，<html></html>您不能<head></head>在.<body></body><div>

将您的 CSS 移动到您的全局 CSS 文件或headof index.php，您的map.php页面应仅包含以下内容：

<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
    // google map code
    function initMap() { // etc.
        ....
</script>
<div id="map"></div>
于 2013-03-09T15:40:53.273 回答