Question

我正在使用包含Google地图的页脚的网站。在主页上，页脚在页面上编码并显示正常：http://www.clickityclick.me/morehampton/index.html

然而，在所有其他页面中，我使用jquery从外部文件调用页脚：

<script> 
    $(function(){
        $('#header').load('header_contact.html')
        $('#fatFooter').load('footer.html')
        $('#rightNav').load('rightNav.html')
    });
</script>

在这样加载页脚的页面上，地图不会每次都显示 - 仅偶尔显示。

我是否遗漏了一些简单的内容，导致每次加载页面时地图都无法正确显示？我不想将页脚编码到每个页面上。

欢迎任何建议。

Answer 1

通常这与CSS文件不能很好地发挥作用或者找不到某些内容并默认为浏览器的默认值。当我检查主页的此控制台日志时，它没有包含任何错误。但是，当我检查其他页面时，它抛出了一个错误，上面写着“Uncaught TypeError：无法读取属性'offsetWidth'of null'，这就是map宽度值。这可能是由于除了index.html之外的所有页面上的404错误这可以在浏览器的Source选项卡中看到。正在显示404.我会解决这些404错误，它应该可以解决您的问题。

Answer 2

当您致电init_map()时#map_canvas不存在（稍后会加载）。

调用load中的函数 - 回调：

$('#fatFooter').load('footer.html',function(){if(!window.map){init_map();}});

另外将此添加到init_map()的开头以避免错误：

if(!document.getElementById('map_canvas')){return;}

Answer 3

您在header / fatFooter / rightNav加载代码和callMap脚本之间设置竞争条件。所有这些文件都是异步加载的，所以不保证会先完成。为了防止在加载fatFooter之前运行callMap脚本，您需要使用回调而不是依赖于窗口的加载事件。

由于您在两个地方使用它，因此最简单的方法是将init_map的主体包装在try / catch中（以处理竞争条件不适合您的方式），以及将脚本块添加到footer.html的底部，调用init_map - 但也将其包装在try / catch中。无论哪种方式，都会触发一个try / catch块。

另一种选择是创建一个自定义事件，该事件由加载footer.html触发，并由callMap脚本监听。

Google地图未显示在调用网页的文件中

3 个答案: