任何人都可以帮助查明为什么我得到这个未捕获的参考错误:$ 不是谷歌地图的定义错误

我正在尝试在我的网页上渲染谷歌地图api，但我不断收到此错误：

edit:1076 Uncaught ReferenceError: $ is not defined

这是过程。导致呈现 api 映射的调用从edit.html.haml文件中开始。

edit.html.haml

........html.....
........html.....
........html.....
.col-md-5.col-md-push-1
  .form-group
    %label.control-label!= t('.city_and_country')
      .controls
        %p.enabled
          %input.form-control#location_scratch{ type: :text, autocomplete: :off, value: @account.location }
              %a{ href: 'javascript:EditMap.clearLocation();' }= t('clear')
          %p.error#not_found{ style: 'display:none' }
            = t('.location_error_message')
              #map
              #-----THIS IS WHERE IT STARTS-------------
              != map_init('map,' @account.latitude ? 7 : 0)
              #-------------------------------------------
              = f.hidden_field :location
              = f.hidden_field :country_code
              = f.hidden_field :latitude
              = f.hidden_field :longitude

然后，从edit.html.haml文件中的map_init转到map_helper.rb文件

map_helper.rb
module MapHelper
  def map_init(id, zoom = 2)
    map_script_load + map_js_initialization(id, zoom)
  end
  private
  def map_script_load
    key = Rails.application.config.google_maps_api_key
    uri = "#{request.ssl? ? 'https' : 'http'}://maps.googleapis.com/maps/api/js?v=3&amp;key=#{key}"
    "<script async defer src='#{uri}' type='text/javascript'></script>"
  end
  def map_js_initialization(id, zoom)
    javascript_tag <<-JSCRIPT
     $(document).on('page:change', function() {
        Map.load('#{id}', 25, 12, 2);
        Map.moveTo(25, 12, #{zoom});
      });
    JSCRIPT
  end

然后从那里转到调用load和moveTo方法的Map.js文件。

问题出在map_js_initialization方法上。JSCRIPT javascript 代码失败了$(document).on('page:change')为什么 jQuery 对象失败了？我看到发生了这样的错误，因为谷歌地图 api 在 jquery 源代码之前加载。但是，我也在地图上放置了一个async defer，结果仍然没有变化。

我在application.js文件中有require jquery，然后在我application.html.haml文件中有

!!!5
%html
  %head
    - page_title = content_for?(:html_title) ? "#{yield(:html_title)}" : t('.openhub')
    %title= page_title
    %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1.0' }
    %meta{ name: 'description', content: page_context[:description] }
    %meta{ name: 'keywords', content: page_context[:keywords] }
    %meta{ name: 'digits-consumer-key', content: ENV['DIGITS_CONSUMER_KEY'] }
    %meta{ name: 'google-site-verification', content: 'jKkWeVQ0tB1bffJYg7xXAtcIM-nrjjVxhP3ohb8UH2A' }
    = yield :custom_head
    = stylesheet_link_tag 'application', media: 'all'
    = csrf_meta_tags
  %body{ zoom: 1 }
    = yield :session_projects_banner
    .container#page
      %header= render partial: 'layouts/partials/header'
      = render partial: 'layouts/partials/page'
      .clear
      %footer= render partial: 'layouts/partials/footer'
    = yield(:javascript) if content_for?(:javascript)
    = javascript_include_tag 'application',
                         'https://www.google.com/recaptcha/api.js',
                         'https://cdn.digits.com/1/sdk.js',
                         '//cdn.optimizely.com/js/3568250046.js',
                         cache: 'cached_js_files',
                         async: true

 - if Rails.env.production?
      <script type="text/javascript">
      (function() {
      var hm = document.createElement('script'); hm.type ='text/javascript'; hm.async = true;
      hm.src = ('++u-heatmap-it+log-js').replace(/[+]/g,'/').replace(/-/g,'.');
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(hm, s);
      })();
      </script>

所以总结一下。我应该能够渲染地图，因为我的 <head> 标签顶部有application.js它有jquery，然后调用 api。我在这里错过了什么吗？

我找到了一个漂亮的属性来解决我遇到的问题。虽然 jquery 没有按正确的顺序加载，但由于某种原因，地图仍然没有渲染。这一小段代码解决了我的问题。

 document.onreadystatechange = function () {
     if (document.readyState == "complete") {
       Map.load('#{id}', 25, 12, 2);
       Map.moveTo(25, 12, #{zoom});
     }
   };

相关内容

最新更新

热门标签：