0

我正在使用gmaps4rails gem（版本 1.5.6），我想添加向地图添加更多折线的功能，而不是替换已经存在的折线。在 github 上，此代码可在此处查看。

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

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

1）在gmaps4rails.base.js中：

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

2）在gmaps4rails.base.js.coffee中：

  #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.coffee附近的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电话做任何事情，但我显然没有做正确的事情。任何人都可以根据这些信息解释我需要做什么才能使其正常工作吗？

4

1 回答 1

1

作为一种解决方法，在我弄清楚如何将功能构建到 gmaps4rails 本身之前，我已经采取这些措施将折线异步加载到地图上......

在我的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参数构建了实际的折线 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

最后，回到视图以将它们组合在一起，我一次异步地构建十个折线集合，直到我从数据库中检索它们：

<% 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 %>
于 2013-03-30T21:05:48.783 回答