jQuery加载谷歌地图

Question

I want to load a google maps file with the jQuery the logic is very easy i want that the page is reloaded every time that i send a new variables to the query... 我想使用jQuery加载Google Maps文件，逻辑非常简单，我希望每次我向查询发送新变量时都重新加载页面...

the problem is the content doesn't load.. 问题是内容无法加载。

here is the code JavaScript.... 这是代码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>

and here the html code 和这里的HTML代码

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

this exemple is work well with other file php or html but just still not work with Google Maps i think that the problem is on the initialize() function on loading of page but i don't know how to solve it please who can help me 这个例子可以与其他文件php或html一起很好地工作，但是仍然不能与Google Maps一起工作，我认为问题在于页面加载时的initialize（）函数，但是我不知道如何解决它，请谁能帮助我

th'x a lot 多谢

Answer 1

There's an error in your JavaScript code, you haven't completed the click call (or the ready call; the nature of syntax errors means we don't really know which one is incomplete). 您的JavaScript代码中有错误，您尚未完成click调用（或ready调用；语法错误的性质意味着我们并不真正知道哪个是不完整的）。 So none of the code is running and you should be seeing a syntax error in the JavaScript console. 因此，所有代码均未运行，并且您应该在JavaScript控制台中看到语法错误。

Using proper indentation can help you catch errors, it's well worth getting in the habit of doing so. 使用适当的缩进可以帮助您捕获错误，这是值得养成的习惯。 Here's a properly-indented version of your code: 这是代码的缩进版本：

<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>

As you can (now) see, you're missing the ); 如您所见（现在），您缺少); on the second-to-last line to complete the click call. 在倒数第二行完成click通话。

Once you fix that, separately there's an error on this line: 解决此问题后，此行将分别出现错误：

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

Just like any other function call, there you're calling Hide_Load and passing its return value into load . 就像其他函数调用一样，您在这里调用 Hide_Load并将其返回值传递给load 。 If you want Hide_Load to be the completion callback, you don't want to call it, you just want to pass the function reference — ditch the () : 如果要将Hide_Load完成回调，则不想调用它，而只想传递函数引用—抛弃() ：

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

With the () , it's like you're calling $("#content").load("file_map.php", undefined); 使用() ，就像您正在调用$("#content").load("file_map.php", undefined); since the result of a function call to a function that doesn't use return is undefined . 因为对不使用return的函数的函数调用结果是undefined 。

Answer 2

Here the content of an exemple file of google maps file_map.php..... 这里是谷歌地图的一个示例文件的内容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>

this file is work well without jQuery... but no result when i call it with the jQuery.. 该文件在没有jQuery的情况下效果很好...但是当我使用jQuery调用时没有结果。

the index.php file is here 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>

as i tell you on the first time this exemple is work well just with google maps the content can't load.... on the result page i have just 正如我第一次告诉你的那样，这个例子很好用，仅适用于Google Maps，内容无法加载....在结果页面上，我只是

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

without the maps content inside 里面没有地图内容

jQuery加载谷歌地图

问题描述

2 个解决方案

解决方案1
0 2012-01-03 15:03:33

解决方案2
0 2012-01-04 10:42:26

jQuery加载谷歌地图

问题描述

2 个解决方案

解决方案1 0 2012-01-03 15:03:33

解决方案2 0 2012-01-04 10:42:26

解决方案1
0 2012-01-03 15:03:33

解决方案2
0 2012-01-04 10:42:26