Javascript 非常简单的jQuery_Javascript_Jquery_Google Maps Api 3

Javascript 非常简单的jQuery

javascript jquery google-maps-api-3

Javascript 非常简单的jQuery,javascript,jquery,google-maps-api-3,Javascript,Jquery,Google Maps Api 3,我有一个很简单的问题给你这是一个使用jQuery.load（）的简单导航脚本问题是其中一个页面使用了谷歌地图API 我从这个论坛的一篇帖子中找到了一些代码，基本上可以让你按需加载地图我想如果我在单击链接时触发loadmap（）和loadscript（），这会起作用问题是我已经有一段时间没有使用jQuery了，并且完全忘记了如何菊花链函数所以基本上：我希望函数执行.load函数，但随后调用LoadMap（）和loadScript（）超量克罗姆 $（文档）.ready（函数（）{ $（

我有一个很简单的问题给你

这是一个使用jQuery.load（）的简单导航脚本

问题是其中一个页面使用了谷歌地图API

我从这个论坛的一篇帖子中找到了一些代码，基本上可以让你按需加载地图

我想如果我在单击链接时触发loadmap（）和loadscript（），这会起作用

问题是我已经有一段时间没有使用jQuery了，并且完全忘记了如何菊花链函数

所以基本上：我希望函数执行.load函数，但随后调用LoadMap（）和loadScript（）


超量克罗姆
$（文档）.ready（函数（）{
$（'.jNav'）。单击（函数（）{
$（'#sandbox'）.load（$（this.attr（'href'））；
返回false；
});
});
函数loadMap（）{
map=新的GMap2（document.getElementById（“map”）；
赛特中心地图（新格拉特林（37.4419，-122.1419），6）；
addOverlay（新的GMarker（map.getCenter（））；
}
函数loadScript（）{
var script=document.createElement（“脚本”）；
script.type=“text/javascript”；
script.src=”http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA-O3c-Om9OcvXMOJXreXHAxQGj0PqsCtxKvarsoS-iqLdqZSKfxS27kJqGZajBjvuzOBLizi931BUow&async=2&callback=loadMap”；
document.body.appendChild（脚本）；
}
超量克罗姆

这是我编辑的代码：

<html>
    <head>
        <title>
            Overcomming Crome 
        </title>
        <script src="http://code.jquery.com/jquery-latest.pack.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
              $('.jNav').click(function(){
                $('#sandbox').load($(this).attr('href'),function() {
                  loadMap();
                  loadScript();
                });
                return false;
              });
            });

            function loadMap() {
                alert("Function 1 loaded");
                map = new GMap2(document.getElementById("map"));
                map.setCenter(new GLatLng(37.4419, -122.1419), 6);
                map.addOverlay(new GMarker(map.getCenter()));
            }

            function loadScript() {
                alert("Function 2 loaded");
                var script = document.createElement("script");
                script.type = "text/javascript";
                script.src = "http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA-O3c-Om9OcvXMOJXreXHAxQGj0PqsCtxKvarsoS-iqLdqZSKfxS27kJqGZajBjvuzOBLizi931BUow&async=2&callback=loadMap";
                document.body.appendChild(script);
            }
        </script>

    </head>
    <body>
        <h1>
            Overcomming Crome
        </h1>
        <li><a href="page1.html" class="jNav">Load Page 1 to Sandbox</a></li>
        <li><a href="page2.html" class="jNav">Load Page 2 to Sandbox</a></li>
        <li><a href="page3.html" class="jNav">Load Page 3 to Sandbox</a></li>
        <div id="sandbox"></div>
    </body>
</html>


超量克罗姆
$（文档）.ready（函数（）{
$（'.jNav'）。单击（函数（）{
$（'#sandbox'）.load（$（this.attr（'href'），function（）{
loadMap（）；
loadScript（）；
});
返回false；
});
});
函数loadMap（）{
警报（“已加载功能1”）；
map=新的GMap2（document.getElementById（“map”）；
赛特中心地图（新格拉特林（37.4419，-122.1419），6）；
addOverlay（新的GMarker（map.getCenter（））；
}
函数loadScript（）{
警报（“已加载功能2”）；
var script=document.createElement（“脚本”）；
script.type=“text/javascript”；
script.src=”http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA-O3c-Om9OcvXMOJXreXHAxQGj0PqsCtxKvarsoS-iqLdqZSKfxS27kJqGZajBjvuzOBLizi931BUow&async=2&callback=loadMap”；
document.body.appendChild（脚本）；
}
超量克罗姆

请注意：“地图”在第1页。html。。。。你能看到我在做什么吗

map = new GMap2(document.getElementById("map"));

id映射中没有任何元素

load函数还有一个回调函数，因此您可以执行以下操作：

$('#sandbox').load($(this).attr('href'), function() {
  loadMap();
  loadScript();
});

id映射中没有任何元素

load函数还有一个回调函数，因此您可以执行以下操作：

$('#sandbox').load($(this).attr('href'), function() {
  loadMap();
  loadScript();
});

您的意思是传递回调函数，如：

$('#sandbox').load($(this).attr('href'), function() {
  loadMap();
  loadScript();
});

当

load（）

完成时，这将调用

loadMap（）

和

loadScript（）

。

您的意思是传递回调函数，如：

$('#sandbox').load($(this).attr('href'), function() {
  loadMap();
  loadScript();
});

当

load（）

完成时，将调用

loadMap（）

和

loadScript（）

。

对

load

函数的调用应如下所示：

$('#sandbox').load($(this).attr('href') function(){
    loadScript();
    loadMap();
});

对

load

函数的调用应如下所示：

$('#sandbox').load($(this).attr('href') function(){
    loadScript();
    loadMap();
});

解决方案不是将函数“菊花链”起来，因为这样仍然可以按顺序执行它们。在调用其他方法之前，您需要等待外部数据加载，方法是将回调函数传递到

load

：

$('#sandbox').load($(this).attr('href'), function() {
    loadScript();
    loadMap();
});

解决方案不是将函数“菊花链”起来，因为这样仍然可以按顺序执行它们。在调用其他方法之前，您需要等待外部数据加载，方法是将回调函数传递到

load

：

$('#sandbox').load($(this).attr('href'), function() {
    loadScript();
    loadMap();
});

由于您将

&async=2

和

&callback=loadMap

传递给Google maps API，它将在加载后自动调用回调函数（即loadMap）

$('#sandbox').load($(this).attr('href'), function() {
    loadScript();
    // loadMap(); <-- unnecessary; and might throw JavaScript error
});

$（'#sandbox'）.load（$（this.attr（'href'），function（）{
loadScript（）；
//loadMap（）；由于您将&async=2
和&callback=loadMap
传递给Google maps API，它将在加载后自动调用回调函数（即loadMap）
$('#sandbox').load($(this).attr('href'), function() {
    loadScript();
    // loadMap(); <-- unnecessary; and might throw JavaScript error
});

$（'#sandbox'）.load（$（this.attr（'href'），function（）{
loadScript（）；
//loadMap（）；您应该尝试新的google maps api v3:）虽然这是一个很好的版本，但它似乎有更多的代码-因此，当我在早期版本中找到这个示例时，我认为如果我能够实现这一点，那么我可以随时升级新版本，不需要api密钥，而且它还有一个更简单的api imho:）如果你不知道一个问题的答案，那么你怎么知道它“简单”？只是说“…你应该尝试新的谷歌地图api v3:）只是一个想法这是一个伟大的版本-但它似乎有更多的代码-因此，当我发现这个早期版本的例子，我认为如果我得到了这个工作，那么我可以随时升级新版本doesn不需要API密钥，而且它还有一个更简单的API imho:）如果你不知道问题的答案，那么你怎么知道它“简单”？只需说“…它们是通过load
函数动态加载的。@gor-你对发布与我完全相同的答案有何评论？它们是通过load
函数动态加载的@gor-您对发布与我完全相同的答案有何评论？您好，是的，所以问题在于page1.html上存在map元素。我使用您的示例编辑了代码-我添加了警报，让我知道何时加载这两个函数-到目前为止，我只加载了“Function 1”任何原因？如我所说