Question

我正在按照https://github.com/apneadiving/Google-Maps-for-Rails的步骤构建一个新的测试应用。不知道为什么我只渲染一个空框架，没有地图，没有标记。

以下是我的代码的快照。

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My New Google Maps Rails App</title>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

    <script src="https://maps.google.com/maps/api/js?v=3.23&amp;libraries=geometry;&amp;key=AIzaSyAncOJnAgKEjrv2PY__Z0gYy3zJyTznUQ0" type="text/javascript"></script>
    <script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer_packed.js" type="text/javascript"></script>
    <script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/richmarker/src/richmarker-compiled.js" type="text/javascript"></script>
    <script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox_packed.js" type="text/javascript"></script>

    <%= csrf_meta_tags %>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row-fluid">
        <%= render 'layouts/messages' %>
      </div>
      <%= yield %>
    </div>
  </body>
</html>

application.js

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

items_controller.rb - 索引方法

  def index
    @items = Item.order(updated_at: :desc, created_at: :desc)
    @hash = Gmaps4rails.build_markers(@items) do |item, marker|
      marker.lat 43.70676484
      marker.lng -79.39831068
      marker.infowindow "TEST"
    end
  end

文件gmaps.js

中的Java脚本代码

handler = Gmaps.build('Google');
handler.buildMap({
    provider: {
      disableDefaultUI: true
      // pass in other Google Maps API options here
    },
    internal: {
      id: 'map'
    }
  },
  function(){
    markers = handler.addMarkers(markers);
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
  }
);

最后是index.html.erb

的items文件

<h1>Items Index</h1>

<!--<p id="notice"><%= notice %></p>-->

<h3>Listing Items</h3>

<table class="table table-striped table-bordered table-hover table-condensed table-responsive">
  <thead>
    <tr>
      <th colspan="4" style="text-align: center">Actions</th>
      <th style="text-align: center">ID</th>
      <th style="text-align: center">Item ID</th>
      <th style="text-align: center">Item Name</th>
      <th style="text-align: center">Created At</th>
      <th style="text-align: center">Updated At</th>
    </tr>
  </thead>

  <tbody>
    <% @items.each do |item| %>
      <tr>
        <td><%= link_to 'Show', item %></td>
        <td><%= link_to 'Edit', edit_item_path(item) %></td>
        <td><%= link_to 'Destroy', item, method: :delete, data: { confirm: 'Are you sure?' } %></td>
        <td><%= link_to 'GET-Update', [:get_update, item] %></td>
        <td><%= item.id %></td>
        <td><%= item.item_id %></td>
        <td><%= item.item_name %></td>
        <td><%= item.created_at %></td>
        <td><%= item.updated_at %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<div class="row-fluid">
  <div id="map" style='width: 100%; height: 500px; border: 1px solid black;'></div>
</div>

<br>

<%= link_to 'New Item', new_item_path %> |
<%= link_to 'Home', '/' %>

<script type="text/javascript">
  markers = handler.addMarkers(<%=raw @hash.to_json %>);
</script>

不知道我在这里做错了什么？

另外，我不认为lat和lng在addMarkers方法中设置正确。不要认为来自控制器的值会传递给方法。

Answer 1

我以这种方式更改了＆＃39; items_controller.rb中的string[] segments = Request.Url.Segments; // returns ["/", "Person/", "Detail"] string value = segments[1].Remove(segments[1].Length - 1);; // returns "Person"方法：

def index @items = Item.order（updated_at :: desc，created_at :: desc）

index

端

以这种方式更改了页面@hash = Gmaps4rails.build_markers(@items) do |item, marker| marker.lat item.lat || 51.497731 marker.lng item.lng || -0.136023 marker.infowindow item.item_name + " " + item.item_id title = item.item_id marker.json({:title => title}) end中的script：

index.html.erb

将文件<script type="text/javascript"> buildMap (<%=raw @hash.to_json %>); </script>替换为文件gmaps.js（将gmaps_google.js.coffee替换为Java Script：

coffee script

在完成所有这些更改后，地图将使用项目正确呈现。

渲染时清空谷歌地图

1 个答案: