Question

我想在点击按钮/链接后加载Google地图，以限制对Google Maps API的请求数量（费用！*）。是什么让它比简单的脚本更复杂？＃39;元素注入（追加）onclick事件是我还需要以相同的方式加载另外两个库：marker_with_label和infobox，包装在一个文件＆＃39; extra_libs.js.coffee＆＃39;中。它们只能在获取google maps api后加载。此外，运行其他脚本必须等到获取这两个库。

我有一个有效的解决方案，但我不确定定义然后触发$（window）.load是正确的方法。请回顾一下，也许你们知道更好的方法吗？我正在考虑设置超时，将执行推迟到jQuery.active＆＃39; == 0等等，但我找不到如下所示的简单和简短的解决方案：

# Callback function used when google map api is loaded, must be a global function
window.load_scripts = ->
  $('<%= javascript_include_tag asset_path('extra_libs'), id: :extra_libs %>').appendTo('body') unless $('#extra_libs').length
  $(window).load ->
    init_map_and_street_view()
  $(window).trigger('load') # it doesn't work if we don't trigger this manually

# do some stuff with the map, init, set center etc.
init_map_and_street_view = ->
  App.gMap.init('blablabla')
  App.gMap.getMap().setCenter(App.gMap.getLocation($('#map')))
  #...

load_map = ->
  $('<%= javascript_include_tag map_url+"&callback=load_scripts", id: :google_maps_api %>').appendTo('body') unless $('#google_maps_api').length

$('#tab_map, #tab_street').click =>
  load_map()

重要的是你在一个＆＃39;脚本中加载谷歌地图api的频率＆＃39;

＆＃39;＆＃39;＆＃39; UPDATE＆＃39;＆＃39;＆＃39; 根据@Archer的建议，我将$（window）.load更改为$ .getScript（== $ .ajax）并简化了一些事情并且看起来更快：

window.load_scripts = ->
  $.getScript('<%= asset_path("extra_libs") %>', init_map_and_street_view)

其余的保持不变

在Rails / Coffeescript / jQuery中异步加载Google Maps和相关脚本

0 个答案: