logo标签列表

在gmaps4rails中显示多边形

ruby-on-railsrubyruby-on-rails-3polygongmaps4rails
3

我是一名Ruby新手。尝试使用gmaps4rails宝石（非常棒的宝石）在Google地图上显示一组点的多边形。如果根据下面的代码样本有任何建议，将不胜感激！我可以看到地图的轮廓，但没有地图和多边形。更新：此代码已更新，问题已解决。

Schoolpoint类是属于School的纬度/经度对列表。

在我的控制器中：

@polyjson = []
schoolpoints = []    
Schoolpoint.where(:school_id => params[:id]).each do |point|
  schoolpoints << { :lng => point.longitude, :lat => point.latitude}
end
@polyjson = [schoolpoints]
@polyjson = @polyjson.to_json

在视图中：
<%= gmaps({"polygons" => { "data" => @polyjson }})

在Schoolpoint模型中：

class Point < ActiveRecord::Base

  belongs_to :place

  acts_as_gmappable :process_geocoding => false

  def gmaps4rails_address
    "#{longitude}, #{latitude}" 
  end
end

更新：这个错误现在已经不存在了，但我仍然保留它以防对于处理类似问题的人有所帮助。最后，这里是结果为“未捕获语法错误 => 意外标记”的JavaScript代码。

Gmaps.map = new Gmaps4RailsGoogle();
Gmaps.load_map = function() {
Gmaps.map.initialize();
Gmaps.map.polygons = [[{"lng"=>-80.190262, "lat"=>25.774252, "strokeColor"=>"#FF0000", "strokeOpacity"=>0.3, "strokeWeight"=>1, "fillColor"=>"#FF0000", "fillOpacity"=>0.7}, {"lng"=>-87.6245284080505, "lat"=>41.8868315803506}, {"lng"=>-87.6241636276245, "lat"=>41.8674515900783}, {"lng"=>-87.6203870773315, "lat"=>41.8674835487326}, {"lng"=>-87.6167392730712, "lat"=>41.8579591627635}, {"lng"=>-87.6348495483398, "lat"=>41.8577034549953}, {"lng"=>-87.6342701911926, "lat"=>41.8588701133785}, {"lng"=>-87.6341199874878, "lat"=>41.858946025344}, {"lng"=>-87.6341146230697, "lat"=>41.8590858629394}, {"lng"=>-87.6341199874878, "lat"=>41.8600767034266}, {"lng"=>-87.6342219114303, "lat"=>41.8612433185139}, {"lng"=>-87.634157538414, "lat"=>41.8613112372298}, {"lng"=>-87.6342540979385, "lat"=>41.8621502271823}, {"lng"=>-87.6341950893402, "lat"=>41.8622580965204}, {"lng"=>-87.6342433691024, "lat"=>41.8626336402037}, {"lng"=>-87.6341092586517, "lat"=>41.8630930789441}, {"lng"=>-87.6342326402664, "lat"=>41.8631010691539}, {"lng"=>-87.6342862844467, "lat"=>41.8651984646832}, {"lng"=>-87.6342165470123, "lat"=>41.865314318812}, {"lng"=>-87.6342540979385, "lat"=>41.865929540668}, {"lng"=>-87.6343238353729, "lat"=>41.8661652409794}, {"lng"=>-87.6343667507171, "lat"=>41.8664728485533}, {"lng"=>-87.6342701911926, "lat"=>41.866564731048}, {"lng"=>-87.6343882083892, "lat"=>41.8673317449823}, {"lng"=>-87.6344525814056, "lat"=>41.8680388278011}, {"lng"=>-87.6346457004547, "lat"=>41.8691693450993}, {"lng"=>-87.6346671581268, "lat"=>41.8696886572982}, {"lng"=>-87.6345813274383, "lat"=>41.8698804022745}, {"lng"=>-87.6347583532333, "lat"=>41.869992253245}, {"lng"=>-87.634892463684, "lat"=>41.8706873227465}, {"lng"=>-87.6353269815445, "lat"=>41.8726167002032}, {"lng"=>-87.6352626085281, "lat"=>41.8728443868687}, {"lng"=>-87.6354557275772, "lat"=>41.8730081609862}, {"lng"=>-87.6353698968887, "lat"=>41.8732797854267}, {"lng"=>-87.6356971263885, "lat"=>41.8740227522642}, {"lng"=>-87.6356971263885, "lat"=>41.8746458790817}, {"lng"=>-87.6359224319458, "lat"=>41.87509724279}, {"lng"=>-87.6361316442489, "lat"=>41.8754088017203}, {"lng"=>-87.6364105939865, "lat"=>41.8754727110567}, {"lng"=>-87.6364642381668, "lat"=>41.8757642965932}, {"lng"=>-87.6371240615844, "lat"=>41.876678987795}, {"lng"=>-87.637939453125, "lat"=>41.8801059676767}, {"lng"=>-87.6379930973053, "lat"=>41.8806172030015}, {"lng"=>-87.6378536224365, "lat"=>41.8829017358812}, {"lng"=>-87.6375961303711, "lat"=>41.8844593251054}, {"lng"=>-87.6372849941253, "lat"=>41.8857213439117}, {"lng"=>-87.6371347904205, "lat"=>41.8860408383893}, {"lng"=>-87.6355576515197, "lat"=>41.8870552227663}, {"lng"=>-87.6282513141632, "lat"=>41.8870951588295}, {"lng"=>-87.6281654834747, "lat"=>41.8868076186168}]];
153:2439 Uncaught SyntaxError: Unexpected token >
Gmaps.map.create_polygons();
Gmaps.map.adjustMapToBounds();
Gmaps.map.callback();
};
window.onload = function() { Gmaps.loadMaps(); };
生成的js添加到问题中...我应该想到这一点。谢谢！我在这个问题上看到了https://dev59.com/unA75IYBdhLWcg3wuLjD，问题是代码中的制表符。我在我的视图中删除了制表符并用空格替换，但没有改变。 - tomb
2个回答
3
我完成了他们的基础教程，标记功能正常。但是我在折线方面遇到了问题（就像你在多边形上一样）。最终我解决了我的问题（这可以帮助你处理多边形）。所以，视图与他们提供的相同：
<%= gmaps({
       "polylines"    => { "data" => @bemap_polylines }
     })
 %>

模型也是一样的。
class Character < ActiveRecord::Base
  belongs_to :bemap
  acts_as_gmappable

  def gmaps4rails_address
    #describe how to retrieve the address from your model, if you use directly a db column, you can dry your code, see wiki
    address
    logger.info address
  end

end

所以，主要问题出现在控制器中。这是我的控制器代码：
  def show
    @bemap = Bemap.find(params[:id])
    @bemap_polylines = []
    @bemap_characters = []
    @bemap.characters.each do |v|
      @bemap_characters << { :lng => v[:longitude], :lat => v[:latitude]}
    end
    @bemap_polylines << @bemap_characters
    @bemap_polylines =  @bemap_polylines.to_json
    respond_to do |format|
      format.html # show.html.erb
      format.json { render json: @bemap }
    end
  end
1
我改进了方法以匹配维基（我认为），并更新了问题以反映更改，但仍然出现相同的错误。您看到任何明显的错误吗？感谢您的评论，非常感激。 - tomb
谢谢你的提示！看起来它已经朝着正确的方向移动了，但是出现了一个新的错误。你以前遇到过这种情况吗？Uncaught TypeError: Cannot read property 'latLngs' of undefined Gmaps4Rails.a.adjustMapToBounds application.js:19 Gmaps.load_map 153:2441 a.loadMaps application.js:19 window.onload - tomb
这段代码会导致 JS 报错：v = this.polygons; for (k = 0, o = v.length; k < o; k++) { e = v[k], f = e.serviceObject.latLngs.getArray()[0].getArray(); for (l = 0, p = f.length; l < p; l++) d = f[l], this.boundsObject.extend(d) } - tomb
抱歉，我不知道。我现在正在度假，没有任何电脑。无法提供更多帮助。 - apneadiving
感谢 apneadiving。你走在了正确的轨道上，显然系统喜欢 '@polyjson = [schoolpoints].to_json'。 - tomb
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接