Question

我按顺序加载了以下文件：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=try_to_initialize"></script>
<%= javascript_include_tag "application" %>

其次引用的application.js.erb具有以下代码行：

function try_to_initialize() {
    initialize_google_maps();

    if (typeof initial_data !== 'undefined') {
        google_maps_draw_data(initial_data, false);
    }
}

该功能在全球空间定义。它不在任何类型的事件处理程序或本地范围内。

我检查了网络标签，确保按顺序加载文件：

js?v=3.exp&sensor=false&callback=try_to_initialize  GET 200 script  (index):30  (from cache)    6 ms    
application-3332227d778ac1e4b9e987588145ff49.js GET 200 script  (index):31  (from cache)    0 ms

一切都很好看。不幸的是，在控制台中我收到以下错误：

js?v=3.exp&sensor=false&callback=try_to_initialize:95 Uncaught InvalidValueError: try_to_initialize is not a function

我知道错误的含义。我只是不知道为什么会这样。为什么找不到这个功能？

Answer 1

问题

功能定义的顺序在相对较小的应用程序中很重要。如果首先放置Google JS加载器，然后是init，则脚本将阻止其他资源加载，直到它完全加载为止。

测试1（没有异步属性）

以下示例将从Google引擎中抛出错误作为带有消息的对象：

init不是函数

function init(){
   console.log('API loaded');
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&callback=init"></script>

更改<script>的顺序将解决问题，因为init将被定义，然后浏览器会抓取Google库。

<script>
function init(){
   console.log('API loaded');
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&callback=init"></script>

测试2（带异步）

我在async中使用了<script>属性，以确保它不会阻止其他资源加载。

function init(){
   console.log('API loaded');
}

<!-- the following script will act as block because of async attribute -->
<script async src="https://maps.googleapis.com/maps/api/js?v=3.exp&callback=init"></script>

找不到谷歌地图回调功能

1 个答案:

问题

测试1（没有异步属性）

测试2（带异步）