谷歌地图加载了Ajax

google maps loaded with ajax

本文关键字：Ajax 加载 谷歌地图      更新时间：2023-09-26

我有一个网站（使用jquery bbq），当收到响应时，ajax请求被触发，正文中某处的div被替换。大致如下：

var mainContent = $('#main_content');
if ( cache[ url ] ) {
        mainContent.fadeOut(duration, function() {
            mainContent.html(cache[ url ]);
            mainContent.fadeIn(duration, function() {
                $(document).trigger("ajax_loaded");
            });
        });
    } else {
        mainContent.fadeOut(duration, function() {
            var postAjaxCallback = function() {
                cache[ url ] = mainContent.html();
                $(document).trigger("ajax_loaded");
            };
            $('#loading').fadeIn(duration, do_ajax(url, duration, postAjaxCallback));
        } );
    }
function do_ajax(linkVal, duration, callback) {
$.ajax({ 
    type: "GET",
    url: linkVal,
    dataType: "html",
    success: function(page){
        var mainContent = $('#main_content');
        mainContent.stop(true, true);
        if(parseInt(page)!=0)  
        {
            mainContent.html(page);
            $('#loading').fadeOut(duration, function() {
                mainContent.fadeIn(duration, callback);                 
            } );
        }
    }
    });
}

现在总的来说，这很好用。主页是这样的：

<html>
    <head>
       ...
    </head>
    <body>
        <div id="main_content");
           <p>Hello world!</p>
        </div>
    /body>
</html>

阿贾克斯对#page2的回报是这样的

<p>Hello to a different world!</p>

在#page3它变得有点复杂。返回的 ajax 是：

<script type="text/javascript">
function initialize() {
  var mapOptions = {
    zoom: 11,
    streetViewControlOptions: true,
    center: new google.maps.LatLng(26.737792, 49.878273),
    mapTypeId: google.maps.MapTypeId.SATELLITE
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";
  document.body.appendChild(script);
}
loadScript();
$(document).bind("ajax_loaded", function() {
        console.log("map resize called");
        google.maps.event.trigger(map, 'resize');
});
</script>

现在第一次加载#page3时，一切正常，控制台日志触发并调整地图大小（由于灰色区域问题需要调整大小）。现在我想发生的是所有其他页面继续正常加载（通过 ajax 调用或从缓存），并且当再次导航到#page3时（即从缓存设置#("main_content")，resize 事件再次触发。我想用最简单的术语来说，我正在尝试创建一个在每个 ajax 页面加载后触发的事件，我可以在每个 ajax 检索到的页面上都有一个自定义$(document).bind("ajax_loaded", function() {});，可以执行我需要的任何后处理。目前表现出的行为是在我加载#page3之前什么都不会发生（正如我提到的，地图被调整了大小，一切都是肉汁）。之后，每个页面加载都会触发绑定函数并打印到控制台（我想既然我已经将其绑定到$(document)，是否有更好的办法使其对每个页面都唯一？但是，真正的痛苦是，当我尝试重新加载#page3时，地图会加载但未调整大小（控制台仍在打印），因此我在地图上有灰色区域。谁能帮助我有限的JavaScript经验来获得正确的工作流程。重申：

  • 每个 ajax 加载（或从缓存加载）都会触发一些事件
  • 在每个 ajax 页面（#page1、#page2等）中，都会有一个从上述步骤触发的函数，该函数可以为每个 ajax 页面执行唯一的设置。

感谢您的帮助！

编辑我尝试使用以下方法：

mainContent.find("script").each(function(i) {
    eval($(this).text());
});

而不是触发ajax_loaded事件，但无济于事。还有什么我可以尝试的吗？

我相信

当第二次添加谷歌地图 API 时，一切都搞砸了（重新加载 #page3 .它会导致一些错误，脚本的其余部分可能会停止工作。尝试将谷歌地图API的加载包装到条件if (typeof google === 'undefined') { ...中。

但说实话，整个概念可能需要一些重构:)。

相关文章：