谁能帮我查明为什么我得到这个Uncaught ReferenceError：Google地图未定义$错误？

Question

我正在尝试在我的网页上呈现google map 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

然后从map_init文件中的edit.html.haml进入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

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

但是，问题出在map_js_initialization方法中。 $(document).on('page:change')的JSCRIPT javascript代码失败了，为什么jQuery对象失败了？ 我看到发生这样的错误是因为google maps 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。 我在这里想念什么吗？

Answer 1

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

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

谁能帮我查明为什么我得到这个Uncaught ReferenceError：Google地图未定义$错误？

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-03-31 14:57:40

谁能帮我查明为什么我得到这个Uncaught ReferenceError：Google地图未定义$错误？

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-03-31 14:57:40

解决方案1
0 已采纳 2016-03-31 14:57:40