渲染时清空 google 贴图

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

文件中的Java脚本代码gmaps.js

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

我这样更改了“items_controller.rb”中的 index 方法：

默认索引 @items = Item.order(updated_at: :desc, created_at: :desc)

@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

结束

将页面 index.html.erb 中的 script 更改为：

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

将文件 gmaps.js 替换为文件 gmaps_google.js.coffee（将 Java Script 替换为 coffee script:

class RichMarkerBuilder extends Gmaps.Google.Builders.Marker #inherit from builtin builder
  #override create_marker method
  create_marker: ->
    options = _.extend @marker_options(), @rich_marker_options()
    @serviceObject = new RichMarker options #assign marker to @serviceObject

  rich_marker_options: ->
    marker = document.createElement("div")
    marker.setAttribute 'class', 'marker_container'
    marker.innerHTML = @args.title
    _.extend(@marker_options(), { content: marker })

  infobox: (boxText)->
    content: boxText
    pixelOffset: new google.maps.Size(-140, 0)
    boxStyle:
      width: "300px"

  # override method
  create_infowindow: ->
    return null unless _.isString @args.infowindow
    boxText = document.createElement("div")
    boxText.setAttribute("class", 'marker_info_box') #to customize
    boxText.innerHTML = @args.infowindow
    @infowindow = new InfoBox(@infobox(boxText))

@buildMap = (markers)->
    handler = Gmaps.build 'Google', { builders: { Marker: RichMarkerBuilder} } #dependency injection

    #then standard use
    handler.buildMap { provider: {}, internal: {id: 'map'} }, ->
      markers = handler.addMarkers(markers)
      handler.bounds.extendWith(markers)
      handler.fitMapToBounds()

在所有这些更改之后，地图已正确呈现项目。

渲染时清空 google 贴图

Empty google map when rendering

ruby-on-rails

gmaps4rails