我如何添加一个addPolylines功能到gmaps4rails

Question

我正在使用gmaps4rails gem(版本1.5.6)，我想添加向地图添加更多折线的能力，而不是替换已经存在的折线。在github上，这段代码可以在这里查看。

此功能已经存在于标记:Gmaps.map.replaceMarkers(your_markers_json_array); Gmaps.map.addMarkers(your_markers_json_array);

标记功能似乎分布在两个地方:

Gmaps4Rails.prototype.addMarkers = function(new_markers) {
  this.markers = this.markers.concat(new_markers);
  this.create_markers();
  return this.adjustMapToBounds();
};

2)在gmaps4rails.base.js。咖啡:

  #add new markers to on an existing map
  addMarkers : (new_markers, adjustBounds = true) ->
    #update the list of markers to take into account
    @markers = @markers.concat(new_markers)
    #put markers on the map
    @create_markers()
    @adjustMapToBounds() if adjustBounds

我想我可以使用replacePolylines代码来制作我自己的addPolylines调用:

1)在gmaps4rails.base.js中replacePolylines代码附近:

Gmaps4Rails.prototype.addPolylines = function(new_polylines) {
  this.polylines = this.polylines.concat(new_polylines);
  this.create_polylines();
  return this.adjustMapToBounds();
};

2)在gmaps4rails.base.js。咖啡附近的replacePolylines代码为:

 #add new polylines to on an existing map
  addPolylines : (new_polylines) ->
    #update the list of polylines to take into account
    @polylines = @polylines.concat(new_polylines)
    #put polylines on the map
    @create_polylines()
    #.... and adjust map boundaries
    @adjustMapToBounds()

我已经对已经添加到我的Rails项目的gem进行了这些更改，并且我已经重新启动了我的Rails服务器。我把它叫做replacePolylines，和Gmaps.map.addPolylines(your_polylines_json_array);一样。它在控制台中产生一个错误:Uncaught TypeError: Object #<Gmaps4RailsGoogle> has no method 'addPolylines' .

在gmaps4rails项目中似乎没有其他地方，我必须为我的addPolylines调用做任何事情，但我显然没有做正确的事情。有谁能解释一下，根据这些信息，我需要做些什么才能让它工作?

Answer 1

作为一种变通方法，在我弄清楚如何将功能构建到gmaps4rails本身之前，我已经采取了这些措施来异步地将Polylines加载到地图上…

在我的UsersController中，我设置了show动作来构建一个空白的@polylines_json集:

def show
  @user = User.find(params[:id])
  @polylines_json = {}
end

这里的想法是不让gmaps4rails在其初始地图加载上显示任何内容，以便初始页面显示尽可能快。在视图中，我用这一行加载地图:

<%= gmaps( :polylines => { :data => @polylines_json }, :map_options => { :type => 'HYBRID', :zoom => 12, :auto_adjust => false, :center_latitude => "-77", :center_longitude => "21" } ) %>

回到UsersController，我有一个自定义动作maps，设置为处理包含from和to参数的json请求(这样我就可以找到特定范围内的项目)。在这个动作中，我正在构建基于from/to参数的实际Polyline json数据:

def items
  items = items.find(:all, :conditions => ['id >= ? AND id <= ?', params[:from], params[:to]])
  polyline = []
  i=0
  items.each do |item|
    polyline[i] = []
    polyline[i] += [{:lng=>item.longitude.to_f,:lat=>item.latitude.to_f}]
    i += 1
  end
  @polylines_json = polyline.to_json
  respond_to do |format|
    format.json { render json: @polylines_json }
  end
end

最后，回到视图中把它们集合在一起，我异步地构建Polyline集合，每次10个，直到我从数据库中检索到它们:

<% content_for :scripts do %>
  <script type="text/javascript" charset="utf-8">
    numberOfItems = <%= @user.items.count %>;
    var polylines= [];
    function LoadMap(from, to) {
      if (to < numberOfItems){
        nextFrom = to + 1;
        nextTo = to + 10;
      }
      if(nextTo <= numberOfItems){
        $.ajax({
          dataType: 'json',
          url: "http://<%= request.host %>/users/<%= @user.id %>/maps.json?from="+from+"&to="+to,
          success: function(response) {
            polylines = polylines.concat(response);
            Gmaps.map.replacePolylines(polylines);
            LoadMap(nextFrom, nextTo);
          }
        });
      }
    }
    LoadMap(1,10);
  </script>
<% end %>