Question

我安装了gmaps4rails 2.1.2，地图显示在本地但未生成。我可以告诉它必须按顺序/命令js被调用，但我无法弄明白。

查看

<script src="//maps.google.com/maps/api/js?v=3.13&amp;sensor=false&amp;libraries=geometry" type="text/javascript"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js' type='text/javascript'></script>

...
    <% if params[:search].present? && @vehicles.present? %>


      <script type="text/javascript">
        var directionsDisplay = new google.maps.DirectionsRenderer();
        var directionsService = new google.maps.DirectionsService();

        function calcRoute() {
          var origin      = new google.maps.LatLng(<%= @vehicles.first[1].to_f/1000000 %>, <%= @vehicles.first[2].to_f/1000000 %>);
          var destination = new google.maps.LatLng(19.434576, -99.1878757);
          var request = {
              origin:      origin,
              destination: destination,
              travelMode:  google.maps.TravelMode.DRIVING
          };
          directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(response);
            }
          });
        }

        calcRoute();

        var handler = Gmaps.build('Google');
        handler.buildMap({ internal: {id: 'directions'}}, function(){
          directionsDisplay.setMap(handler.getMap());
        });
      </script>

    <% end -%>

的application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require turbolinks
//= require_tree .
//= require bootstrap-sprockets
//= require underscore
//= require gmaps/google

$(document).ready(function() {
  $('[data-toggle=offcanvas]').click(function() {
    $('.row-offcanvas').toggleClass('active');
  });
});

application.html.erb

<%= stylesheet_link_tag    "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>

3月23日更新：

已添加到应用程序视图：＆lt;％= yield：scripts％＆gt;
添加数据-no-turbolink =＆＃34; true＆＃34;
添加＆lt;％content_for：javascript do％＆gt;
添加$（文件）.on（＆＃39;页面：更改＆＃39;，function（）{

仍然无法正常工作。

不在Heroku工作：

在当地工作：

application.html.erb

<%= stylesheet_link_tag    "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= yield :scripts %> 
<%= csrf_meta_tags %>

nearestVehicle.html.erb

<script src="//maps.google.com/maps/api/js?v=3.13&amp;sensor=false&amp;libraries=geometry" type="text/javascript"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js' type='text/javascript'></script>


<% content_for(:body_attributes) do %>
    data-no-turbolink="true"
  <% end %>

<!--Header -->
  <div class="row">
    <div class="col-md-12">
      <div class="page-header">
        <h3>Vehículo más cercano a una dirección</h3>
      </div>
    </div>
  </div>


  <!--Table -->
  <div class="row">
    <div class="col-md-3">

        <%= simple_form_for '', url: nearestVehicle_path, :method => :get do |f| %>
            <%= f.input :id, collection: @all_addresses, :label_method => :addrname1, :label => 'Direccion', :selected => params[:id], :autofocus => true %>
            <%= f.button :submit, value: "Buscar",:name => nil%>
        <% end %>

        <table class="table table-striped table-hover">
          <thead>
            <tr>
              <th>Vehiculo</th>
              <th>Distancia (Km)</th>
              <th>Tiempo (min)</th>
            </tr>
          </thead>

        <% if params[:id].present? && @vehicles.present? %>
          <tbody>
            <% @vehicles.each do |vehicle| %>
              <tr>
                <td><%= vehicle[0] %></td>
                <td><%= number_with_precision( vehicle[3].to_f/1000, :precision => 1) %></td>
                <td><%= vehicle[4].to_i/60 %></td>
              </tr>
            <% end %>
          </tbody>
        <% end %>
        </table>
    </div>
    <div class="col-md-9">
        <div style='width: 100%;'>
            <div id="directions" style='width: 100%; height: 400px;'></div>
        </div>
    </div>
  </div>

<% if params[:id].present? && @vehicles.present? %>


<% content_for :javascript do %>
    <script type="text/javascript">
      $(document).on('page:change', function () {

            var directionsDisplay = new google.maps.DirectionsRenderer();
            var directionsService = new google.maps.DirectionsService();

            function calcRoute() {
              var origin      = new google.maps.LatLng(<%= @vehicles.first[1].to_f/1000000 %>, <%= @vehicles.first[2].to_f/1000000 %>);
              var destination = new google.maps.LatLng(<%= @address.positiony.to_f/1000000 %>, <%= @address.positionx.to_f/1000000 %>);
              var request = {
                  origin:      origin,
                  destination: destination,
                  travelMode:  google.maps.TravelMode.DRIVING
              };
              directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                  directionsDisplay.setDirections(response);
                }
              });
            }

            calcRoute();

            var handler = Gmaps.build('Google');
            handler.buildMap({provider: {disableDefaultUI: true }, internal: {id: 'directions'}}, function(){
              directionsDisplay.setMap(handler.getMap());
            });
        });
    </script>
<% end %>
<% end -%>

Answer 1

3月23日UPDATE中描述的更改的一部分，我将// = require_tree移动到列表的末尾。现在它看起来像这样：

//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require turbolinks
//= require bootstrap-sprockets
//= require underscore
//= require gmaps/google
//= require_tree .

Answer 2

根据Buncismamen对此thread的评论

禁用 TurboLink 可以解决此问题，我也遇到了同样的问题，并且禁用Turbolink后，一切正常。要禁用Turbolink，请尝试以下answer

未捕获的ReferenceError：未定义Gmaps（rails 4）

2 个答案: