gmaps4rails this.clusterer在this.clusterer.addMarker(marker)中未定义;

时间:2013-12-18 14:00:25

标签: javascript ruby-on-rails-4 gmaps4rails2

我收到错误this.clustererundefined。您可以在下面看到我的配置。

预期行为:使用#search_form中定义的查询加载页面,而不是使用AJAX从控制器加载标记。最后将标记添加到#map并对其进行聚类。

我的js.coffee

$ ->
  handler = Gmaps.build('Google');
  handler.buildMap { provider: {center: new google.maps.LatLng(49.639177, 9.536133),zoom: 6}, internal: {id: 'map'}},
    ()->
      handler._createClusterer()

  markers = []
  placeMarkers = (data, textStatus, jqXHR) ->
    handler.removeMarkers(markers);
    markers = handler.addMarkers(data)  # <<--- here is the error

  $("#search_form").submit (e) ->
    valuesToSubmit = $(this).serialize
    $.ajax({
      url: $(this).attr("action"),
      data: valuesToSubmit,
      success: placeMarkers,
      dataType: 'json'
    })
    e.preventDefault

  $("#search_form").submit()

和控制器:

def index
respond_to do |format|
  format.html {}
  format.json {
    seminars = Seminar.search(params[:search])
    @markers = Gmaps4rails.build_markers(seminars) do |seminar, marker|
    return if seminar.location.is_a? String
      marker.lat seminar.location.lat
      marker.lng seminar.location.lon
      marker.infowindow render_to_string(:partial => 'seminars/seminar.html.haml', :locals => {seminar: seminar})
      marker.title seminar.course.title
      marker.json({ :id => seminar.id })
    end
    render json: @markers
  }
end

end

来自控制器的回应:

[{"lat":52.517,"lng":13.3889,"marker_title":"Title1","id":1},
 {"lat":51.5114,"lng":7.46517,"marker_title":"Title2","id":3}]

这是stacktrace

Gmaps.Objects.Handler.Handler.addMarker (application.js:22417)
(anonymous function) (application.js:22409)
_.map._.collect (application.js:21094)
Gmaps.Objects.Handler.Handler.addMarkers (application.js:22408)
placeMarkers (application.js:23263)
jQuery.Callbacks.fire (application.js:3049)
jQuery.Callbacks.self.fireWith (application.js:3161)
done (application.js:8236)
jQuery.ajaxTransport.send.callback (application.js:8779)

版本gmaps4rails-2.1.1

2 个答案:

答案 0 :(得分:0)

很奇怪,我再也无法重现了......

我认为更改是将$("#search_form").submit()添加到onMapLoad处理程序。

$ ->
  handler = Gmaps.build('Google');
  handler.buildMap { provider: {center: new google.maps.LatLng(49.639177, 9.536133),zoom: 6}, internal: {id: 'map'}},
    ()->
      $("#search_form").submit()

感谢您的提示@apneadiving

答案 1 :(得分:0)

最近有同样的问题。基本上@apneadiving建议:当在buildMap的回调处理程序完成之前完成ajax调用时,这是一个计时问题。

解决方案: 任何一个只从回调处理程序(也称为序列化)内部或者我更喜欢的内容中启动ajax调用:在ajax响应中通过setTimeout使用回调。这可以使您的应用程序更具响应性,因为可以更多地并行完成调用和处理。