ruby-on-rails - 带有谷歌地图的 Rails。类型错误 : a is null

Question

我有一个 ruby​​ on rails 应用程序，其中 80% 的页面都使用了谷歌地图。所以在我的许多单独的 JS 文件中(在 assets/javascripts 中)我包含了许多来自谷歌的变量，比如

google.maps.DirectionsStatus
new google.maps.LatLng(a,b)
new google.maps.Marker
google.maps.event.addListener

我在 head 部分的 application.html.erb 中包含了以下脚本

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=<%= ENV["GOOGLE_MAP"]%>&sensor=false&libraries=places">
</script>

在我未使用谷歌地图的生产页面中，控制台上显示错误

TypeError: a is null

...(null,_.ia)},p$=function(a,b){this.j=a;this.ma=a.value;this.Vd(this.ma);this.V=b...

这会停止运行没有谷歌地图的页面中的其他 javascript 函数。localhost 中的所有内容都可以正常工作，顺便说一句，它只在生产中(带有 ubuntu 的 Aws-ec2 服务器。服务器 nginx 和应用程序服务器 puma)它不工作。我在谷歌地图集成方面出错了吗？这个问题有解决方法吗？

注意:我没有为应用程序使用 turbolinks。

更新:经过进一步测试，只有 document.ready 函数无法在此类页面上运行。此类页面上的其他 js 函数在生产环境中运行良好。

Answer 1

隔离 Google Map API

从 application.html.erb 中删除 Google 脚本包含。如果您不需要在每个页面上都需要它，请不要在每个页面上加载它。

创建部分 _map_handler.html.erb(或其他)。在顶部，包括您的 Google Map js:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=<%= ENV["GOOGLE_MAP"]%>&sensor=false&libraries=places">
</script>

这个部分(或任意数量的部分)是您放置所有 map ( View )操作的地方。可能不需要说，但所有谷歌调用都必须只是部分调用。

google.maps.DirectionsStatus
new google.maps.LatLng(a,b)
new google.maps.Marker
google.maps.event.addListener

有两个好处:

• Google 脚本不会加载到不需要的页面上
• 如果您切换到另一个 map API，您将需要更改部分内容，但您将避免在整个 View 中散布 Google map 代码依赖项。

如果您有自己的 JavaScript map 处理程序，则必须将 map js 隔离到它自己的已编译 Assets 中。

三个步骤

application.js

Remove //= require_tree .

影响:您现在必须手动将您需要的每个 js 文件作为包含行包含在主 Assets glob 中。这可能会破坏您的 Assets ，但要隔离 map js，您必须经历这一过程。

重要:确保您没有在 application.js 中包含 my_map_handlers.js

assets.rb

添加一行代码将您的 my_map_handlers.js 编译成一个单独的 Assets 文件

Rails.application.config.assets.precompile += %w( my_map_handlers.js)

_map_handler.html.erb

在 Google map API 之后和任何引用之前的部分中包含您的 my_map_handlers js(将通过上述步骤独立编译)

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=<%= ENV["GOOGLE_MAP"]%>&sensor=false&libraries=places">
</script>

<%= javascript_include_tag 'my_map_handlers' %>

---

用于编译/引用单个 Assets 的官方文档是 here .