Question

我想用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但是仍然不能使用谷歌地图我认为问题是在加载页面的initialize（）函数但我不知道如何解决它请谁可以帮助我

很多

Answer 1

您的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。< / p>

Answer 2

这里是google map 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>

没有地图内容

jQuery加载谷歌地图

2 个答案: