Question

我试图通过移动地图动态更新索引页面上的搜索结果。搜索结果应仅显示地图边界中的结果。

我可以成功地将边界返回到控制器，并且我的服务器显示更新的结果，IE，仅显示这些边界内的结果，但我不确定如何在视图中反映/更新这些结果。

我觉得我错过了一些愚蠢的东西，但在花了几个小时之后，我无法看到它。

到目前为止，我有;

Gmaps回调：

google.maps.event.addListener(handler.getMap(), 'idle', function() {
        var bounds = handler.getMap().getBounds();
        drawItems(bounds);

Jquery for bounds：

function drawItems(theBounds) {
    var url = 'gigs.json/?sw_y=' + theBounds.getSouthWest().lng() +
                        '&sw_x=' + theBounds.getSouthWest().lat() +
                        '&ne_y=' + theBounds.getNorthEast().lng() +
                        '&ne_x=' + theBounds.getNorthEast().lat();
    $.get(url, function(newItemData) {
        handler.replace_markers(newItemData);
    });
}

输出如下内容：

/gigs.json....
sw_y=-148.84352170963916
sw_x=-13.80973371328428
ne_y=121.15647829036084
ne_x=87.24165143852134

控制器：

def index
    @loc_search  = true

    if (params[:sw_y] && params[:sw_x] && params[:ne_y] && params[:ne_x])
        bounds = [ [params[:sw_x].to_f, params[:sw_y].to_f],
                 [params[:ne_x].to_f, params[:ne_y].to_f] ]
        @gigs_within_bounds = Gig.within_bounding_box(bounds)
    else
        @gigs_within_bounds = Gig.all
    end


    if params[:search].present?
    @q = @gigs_within_bounds.where('date >= ?', Time.current.to_datetime).where(:filled => false).near(params[:search], 500, :order => 'distance' ).ransack(params[:q])
    else
    @q = @gigs_within_bounds.where('date >= ?', Time.current.to_datetime).where(:filled => false).ransack(params[:q])
    end

    @gigs = @q.result(distinct: true).page(params[:page]).per(20)
    @hash = Gmaps4rails.build_markers(@gigs) do |gig, marker|
      marker.infowindow render_to_string(:partial => "/gigs/infowindow", :locals => { :gig => gig}, :formats => [:html])
      marker.lat gig.latitude
      marker.lng gig.longitude
      marker.title gig.title
    end
  respond_to do |format|
        format.html # index.html.erb
        format.js
        format.json {
            @data = @gigs.collect {|v| {
                     :longitude => v.longitude,
                     :latitude => v.latitude,
            }
            return render :json => @data
        }}
    end
end

我移动地图时，我的服务器已成功过滤;

例如

Processing by GigsController#index as JSON
  Parameters: {"sw_y"=>"50.14085329036084", "sw_x"=>"-83.09701329217522", "ne_y"=>"-39.85914670963916", "ne_x"=>"55.2456675702868"}
Gig Load (0.3ms) etc etc etc...

我对如何使用此数据更新搜索结果感到困惑。非常感谢任何帮助，谢谢。

编辑：

我想补充一点，我有一个_map.js partial和index.js.erb用于在搜索后更新地图。

_map.js.erb

 handler = Gmaps.build('Google', {
  markers: {
     randomize: true,
     maxRandomDistance: 10,
    clusterer: {
      maxZoom:  17,
      gridSize: 50,
    }
  }
});
    handler.buildMap({
      provider: {
        styles: mapStyle,
        minZoom: 2,
        maxZoom: 20,
      },
      internal: {id: 'map'}},
      function(){
      markers = handler.addMarkers(<%=raw @hash.to_json %>);
      handler.bounds.extendWith(markers);
      handler.fitMapToBounds();
    });

和index.js.erb

$('#gigs-list').html("<%= j render(partial: 'gigs') %>");
            $('#map').html('<%= escape_javascript render("map") %>');

我非常确定我只需要一种方法来提交表单/使用新的bounds参数更新视图，因为我的服务器正确响应地图移动。当服务器处理为html或js时，结果会更新，但是json no。

Answer 1

您需要创建一个google.maps.LatLngBounds对象并将其传递给map.fitBounds（地图是任何变量都包含对地图的引用）。

$.get(url, function(newItemData) {
  var bounds = new google.maps.LatLngBounds({
    sw: { lat: sw_y, lng: sw_x }
    nw: { lat: ne_y, lng: ne_x }
  });
  handler.replace_markers(newItemData);
  map.fitBounds(bounds);
});

如果您正在绘制一堆标记并希望地图动态围绕它们的边界，那么另一种方法是：

$.get(url, function(newItemData) {
  var bounds = new google.maps.LatLngBounds();
  var markers = $.map(newItemData, function(item){
    var marker = new google.maps.Marker({
      position: { lat: item["lat"], lng: item["lng"] },
      map: map,
      title: item["title"]
    });
    bounds.expand(marker.position);
    return marker;
  });

  map.fitBounds(bounds);
});

这里的优点是JSON响应不必包含有关边界框的任何信息。

Ruby on rails。根据地图位置更新搜索结果。使用JSON中的数据进行更新

1 个答案: