Rails—了解javascript配置

4年来，我一直在苦苦思索如何在Rails应用程序中使用谷歌地图

我曾经尝试过使用gmaps4rails，但因为太难而放弃了。我设法在SO上找到了一个解决方案，除了我无法指定缩放级别之外，这个方法很有效。然而，在生产中，我的所有其他Java脚本都不起作用。解决方案是移动：

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

我已经在链接的帖子中标记了所有建议解决方案的相关帖子，以及我努力使用这些解决方案解决问题的结果

关于地图上的缩放级别，中的答案解释了这个问题，因为js要求地图上有每个地址。无论我试图指定哪个级别，这都会以某种方式强制缩放级别最大化。因此有两个问题，第一个问题是如何删除强制最大放大级别的位，以便我可以设置一个将被确认的缩放级别，第二个问题是表示缩放级别的方式是否有一些变化，因为如此多的答案（包括我文章中链接的答案）建议使用“setZoom”而不是“缩放：5”。我找不到有效的解决方案

正如我在中概述的，js文件（google地图除外）如果我头上有javascript include标记，就不能在生产环境中工作。我是在codementor上花费了很长时间才找到这个解决方案的。我负担不起另一个时间来了解如何解决这个解决方案所产生的问题。我也没有得到关于为什么需要进行此更改的根本原因的解释。不是吗rails指南建议将其包含在其中，因此我不明白为什么在大多数情况下，将其移动到body标记的末尾是一种让js在生产环境中工作的解决方案。不过，这会破坏地址js，因此这不是正确的解决方案

在我的config.rb中，我有

config/initializers/assets.rb

# Be sure to restart your server when you modify this file.
# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'

# Add additional assets to the asset load path
# Rails.application.config.assets.paths << Emoji.images_path

# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
# Rails.application.config.assets.precompile += %w( search.js )
config/production.rb

  # Do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = false

我理解这些注释意味着assets.rb处理预编译，因此不再需要预编译生产资产。我上面复制的第一行说明告诉我不要退回到资产管道，因此我不确定您希望看到什么不同

在asset.rb中，注释显示：

# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.# Do not fallback to assets pipeline if a precompiled asset is missed.

我理解这意味着application.js中列出的所有内容都已被处理，因此不需要进一步的重新编译步骤。我理解（从多年来解决此问题的先前尝试中，加倍编译是一组单独问题的原因）

我的address.js文件列在我的application.js文件中（通过require树），因此它应该由assets.rb使用的任何进程来处理

Q2.您是否需要application.js中的树

是的，我是

对于您的评论：“另外，如果您不需要application.JS中的整个JS文件树，那么您在assets.rb中标记为预编译的文件（例如address.JS）将被预编译，但不会被加载。”

My application.js具有：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery-fileupload/vendor/jquery.ui.widget
//= require jquery-fileupload/jquery.iframe-transport
//= require jquery-fileupload/jquery.fileupload
//= require bootstrap-sprockets
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
// require underscore
// require gmaps/google
//= require markerclusterer
//= require cocoon
//= require cable
//= require_tree .

我需要树。Address.js在我的app/assets/javascripts文件夹中，因此它应该由application.js列表末尾的require_树行提取

我不确定我是否理解您的任何评论。是否有建议我可以尝试使其工作？您是否建议忽略assets.rb和production.rb设置中的说明

“预编译”和“加载”之间的区别是什么？我将尝试做一些研究来理解这意味着什么

工程师Dave对R_G建议的评论

工程师Dave建议将引用作为一种潜在的解决方案。这篇文章建议：

<script>
// self executing function here
(function() {
   // your page initialization code here
   // the DOM will be available here

})();
</script>

将javascript include标记移动到我的body标记的末尾（我已经这样做了，效果是googlemap不再工作，但是另一个文件中的hide/showjs现在不工作了）

使用此行：

function initMap() {

addEventListener（“DOMContentLoaded”，函数（事件）{ //工作 }))

这篇文章接着建议更简单地实现这一行，如下所示：

如果有人 想要代码，他们可以直接访问： stackoverflow.com/questions/9899372/…–jfriend00 2014年12月13日7:58

，建议：

<script>
// self executing function here
(function() {
   // your page initialization code here
   // the DOM will be available here

})();
</script>

根据这篇文章中的建议，我尝试将这一行替换为：

(function() {
  function initMap() {
   //then continue with the rest of my address.js file
})();

当我保存这个并尝试它时，我得到的结果与我尝试R_G的第一个建议时相同。没有地图。chrome inspector中没有显示控制台错误

否决票

我不明白为什么在这个问题上投了反对票。我多年来一直在努力学习如何使用javascript与rails一起工作。我花了数千美元在codementor.io/upwork和其他一些网站上，试图为学习这一点支付专业帮助。我去过我所在城市的每一次会议，并发表了一篇博文int在我有机会的时候在不同的城市尝试。我还没有找到一个能够解决这个问题的人。4年多了，我仍在努力解决这个问题。为什么投票反对这个问题。这并没有让我明白为什么这个论坛不是寻求帮助的合适地方。我没有其他选择。我只是想st没有更多的预算可以浪费在codementor.io上。否决票只会让我损失分数，这会让我无法在这个论坛上再次发起悬赏，试图找到一些有助于解决这个问题的信息。如果你对如何更好地问这个问题有建设性的反馈，或者做一些必要的研究来找到答案答：以上任何一件事都将不胜感激。祝你有愉快的一天

对其他人，谢谢你帮助我

布伦齐的建议

非常感谢您花时间进行回购。看到其他人来安排这件事非常有帮助。也就是说，这并不重要

<script>
// self executing function here
(function() {
   // your page initialization code here
   // the DOM will be available here

})();
</script>

function initMap() {

(function() {
  function initMap() {
   //then continue with the rest of my address.js file
})();

<%= csrf_meta_tags %>
<%= favicon_link_tag %>
<!-- <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> -->
<script src="https://maps.googleapis.com/maps/api/js?key=<%= ENV["GOOGLE_MAPS_API_KEY"] %>"async defer></script>

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<!-- Latest compiled and minified CSS -->
<%= stylesheet_link_tag  href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" %>

<!-- Optional theme -->
<%= stylesheet_link_tag href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css" %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

function initialize() {
  var losAngeles = new google.maps.LatLng(34.0500, -118.2500);
  var pasadena = new google.maps.LatLng(34.14778, -118.14452);
  var mapOptions = {
    zoom: 10,
    center: losAngeles,
    disableDefaultUI: true,
    mapTypeControlOptions: google.maps.MapTypeId.SATELLITE
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

<div id="map-canvas"></div>

Uncaught ReferenceError: google is not defined
    at initialize.self-f919dc6….js?body=1:13
(anonymous) @ initialize.self-f919dc6….js?body=1:13

jQuery(document).ready(function() {
   jQuery('[name="organisation[commercial_attributes][standard_financial_split]"]').on('click', function() {
      if (jQuery(this).val() == 'true' ) {
          jQuery('#commercial_standard_financial_split_content').removeClass('hidden');
      } else {
          jQuery('#commercial_standard_financial_split_content').removeClass('hidden').addClass('hidden');
      }
   });

});

;(function() {
    // Document is ready here
})();

;$(function ($, window, document) {
    // Document ready here
}(window.jQuery, window, document));

;(function() {
    // Document is ready here
})();

google.maps.event.addDomListener(window, 'load', initialize);