jQuery加载谷歌地图 - jQuery load google maps

我想用jQuery加载一个谷歌地图文件逻辑是非常简单的，我想页面是重新加载，每次我发送一个新的变量的查询…

问题是内容无法加载…

下面是JavaScript代码....

<script type="text/javascript">
$(document).ready(function(){
function Display_Load()
{
    $("#loading").fadeIn(900,0);
    $("#loading").html("<img src='img/bigLoader.gif' style='border:none;' />");
}
//Hide Loading Image
function Hide_Load()
{
    $("#loading").fadeOut('slow');
};
$("#pagination li").click(function(){
Display_Load();
$("#content").load("file_map.php", Hide_Load());
}
});
</script>

这里是HTML代码

  <body>
<div id="loading" ></div>
<div id="content" ></div>
  </body>

这个例子是工作与其他文件php或html，但只是不与谷歌地图工作，我认为问题是在初始化()函数加载页面，但我不知道如何解决它，请谁可以帮助我

the 'x a lot

有一个错误在你的JavaScript代码，你还没有完成click调用(或ready调用;语法错误的本质意味着我们不知道哪一个是不完整的)。因此，没有任何代码正在运行，您应该在JavaScript控制台中看到语法错误。

使用适当的缩进可以帮助您捕获错误，养成这样做的习惯是非常值得的。下面是适当缩进的代码版本:

<script type="text/javascript">
$(document).ready(function(){
    function Display_Load()
    {
        $("#loading").fadeIn(900,0);
        $("#loading").html("<img src='img/bigLoader.gif' style='border:none;' />");
    }
    //Hide Loading Image
    function Hide_Load()
    {
        $("#loading").fadeOut('slow');
    };
    $("#pagination li").click(function(){
        Display_Load();
        $("#content").load("file_map.php", Hide_Load());
    }
});
</script>

正如您可以(现在)看到的，您在完成click呼叫的倒数第二行上缺少);。

一旦你解决了这个问题，单独在这一行有一个错误:

$("#content").load("file_map.php", Hide_Load());
//                                here -----^^

就像任何其他函数调用一样，这里调用 Hide_Load并将其返回值传递给load。如果你想让Hide_Load作为完成回调，你不希望调用它，你只想传递函数引用 —删除():

$("#content").load("file_map.php", Hide_Load);

对于()，它就像你调用$("#content").load("file_map.php", undefined);，因为函数调用不使用return的函数的结果是undefined。

下面是google maps示例文件file_map.php.....

<?php include_once($_SERVER['DOCUMENT_ROOT'] . "/config.php");
require_once($lib_path."mysql.class.php");
require_once($lib_path."document.php");
require_once $lib_path . "userAccount.php";
require_once($lib_path."adsearch_class.php"); 
?>

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=------------------------------------" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(37.4419, -122.1419), 13);
    map.setUIToDefault();
  }
}
</script>

 </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
  </body>
</html>

这个文件是工作很好没有jQuery…但是当我用jQuery调用它时没有结果。

index.php文件在这里

<?php 
include_once($_SERVER['DOCUMENT_ROOT'] . "/config.php");
require_once($lib_path."mysql.class.php");
require_once($lib_path."document.php");
require_once $lib_path . "userAccount.php";
require_once($lib_path."adsearch_class.php");
$per_page = 5; 
//getting number of rows and calculating no of pages
$rsd=new db_publish;
$rsd->connect();
$sql = "SELECT *FROM `table` LIMIT 0 , 30";
$rsd->query($sql);
$counteur = $rsd->count();
$pages = ceil($counteur/$per_page);
?>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    //Display Loading Image
    function Display_Load()
    {
        $("#loading").fadeIn(900,0);
        $("#loading").html("<img src='img/bigLoader.gif' />");
    }
    //Hide Loading Image
    function Hide_Load()
    {
        $("#loading").fadeOut('slow');
    };

   //Default Starting Page Results
    $("#pagination li:first").css({'color' : '#FF0084'}).css({'border' : 'none'});
    Display_Load();
    $("#content").load("file_map.php");

    //Pagination Click
    $("#pagination li").click(function(){
        Display_Load();
        //CSS Styles
        $("#pagination li")
        .css({'border' : 'solid #dddddd 1px'})
        .css({'color' : '#0063DC'});
        $(this)
        .css({'color' : '#FF0084'})
        .css({'border' : 'none'});
        //Loading Data
        var pageNum = this.("#pagination li").id;
        $("#content").load("file_map.php?page=" + pageNum);
    });

});
    </script>
<style>
body { margin: 0; padding: 0; font-family:Verdana; font-size:15px }
a
{
text-decoration:none;
color:#B2b2b2;
}
a:hover
{
color:#DF3D82;
text-decoration:underline;
}
#loading { 
width: 100%; 
position: absolute;
}
#pagination
{
text-align:center;
margin-left:120px;
}
li{ 
list-style: none; 
float: left; 
margin-right: 16px; 
padding:5px; 
border:solid 1px #dddddd;
color:#0063DC; 
}
li:hover
{ 
color:#FF0084; 
cursor: pointer; 
}

</style>

    <div align="center">

    <div id="loading" ></div>
    <div id="content" ></div>

    <table width="800px">
    <tr><Td>
            <ul id="pagination">
                <?php
                //Show page links
                for($i=1; $i<=$pages; $i++)
                {
                    echo '<li id="'.$i.'">'.$i.'</li>';
                }
                ?>
    </ul>   
    </Td></tr></table>
    </div>

正如我第一次告诉你的，这个例子是工作得很好，只是与谷歌地图的内容不能加载....在结果页我只有

<div id="map_canvas" style="width: 500px; height: 300px"></div>

里面没有地图的内容