使用gmaps4rails动态加载Google地图标记 [英] Dynamically load Google Maps Markers with gmaps4rails

问题描述

如何只使用 gmaps4rails 加载位于地图边界内的标记？当然，在平移和/或缩放之后加载新的。

直接与此相关，我如何获得当前的地图边界和缩放级别？

解决方法

以下是我如何做到的，我只在用户完成平移或缩放后替换标记，如果您需要不同的行为，则使用不同的事件侦听器：

在您的视图（index.html.erb）中：

 <％= gmaps（{map_options => {zoom=> 15，
auto_adjust=> false，
detect_location=> true，
center_on_user=> true}假，真）％> 
  

在视图底部添加：

 < script type =text / javascriptcharset =utf-8> 
 
函数gmaps4rails_callback（）{
 google.maps.event.addListener（Gmaps4Rails.map，'idle'，function（）{
 var bounds = Gmaps4Rails.map.getBounds（ ）; 
 drawItems（bounds）; 
}）; 
} 
 
< / script> 
  

在application.js中（使用jQuery）：

 函数drawItems（theBounds）{
 var url ='/venues.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）{
 Gmaps4Rails.replace_markers（newItemData）; 
}）; 
} 
  

venues_controller＃索引：

如果（params [：sw_y]&&; params [：sw_x]& amp;& amp; amp; amp; amp; amp; params [code> def index
＃ ;& 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]]
@venues_within_bounds = Venue.within_bounds（bounds）
else
@venues_within_bounds = Venue.all
end

respond_to do | format |
format.html＃index.html.erb
format.json {
@data = @ venues_within_bounds.collect {| v | {
：longitude => v.longitude，
：latitude => v.latitude，
：picture => v.marker_picture，
：title => v.marker_title
}
render：json => @data
}
end
end

Venue.rb模型（使用mongodb和mongoid）：

  def self.within_bounds（bounds）
 self.where（：location.within => {$ box=> bounds}）
 end 
  

How do I load only markers that are inside the map bounds with gmaps4rails? And of course load new ones after pan and/or zoom.

Directly related to that, how can I get the current boundaries and zoomlevel of the map?

解决方案

Here is how I did it, I only replace the markers after the user finishes panning or zooming, if you require different behavior then use a different event listener:

In your view (index.html.erb):

<%= gmaps({ "map_options" => { "zoom" => 15, 
                               "auto_adjust" => false, 
                               "detect_location" => true, 
                               "center_on_user" => true }}, false, true) %>

At the bottom of your view add:

<script type="text/javascript" charset="utf-8">

function gmaps4rails_callback() {
    google.maps.event.addListener(Gmaps4Rails.map, 'idle', function () {
        var bounds = Gmaps4Rails.map.getBounds();
        drawItems(bounds);
    });
}

</script>

In application.js (using jQuery):

function drawItems(theBounds) {
    var url = '/venues.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) {
        Gmaps4Rails.replace_markers(newItemData);
    });
}

venues_controller#index:

def index
    # Only pull venues within the visible bounds of the map
    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] ]
        @venues_within_bounds = Venue.within_bounds(bounds)
    else
        @venues_within_bounds = Venue.all
    end   

    respond_to do |format|
        format.html # index.html.erb
        format.json { 
            @data = @venues_within_bounds.collect {|v| {
                     :longitude => v.longitude, 
                     :latitude => v.latitude, 
                     :picture => v.marker_picture, 
                     :title => v.marker_title 
            }
            render :json => @data
        }
    end
end

Venue.rb model (using mongodb and mongoid):

def self.within_bounds(bounds)
    self.where(:location.within => {"$box" => bounds })
end

这篇关于使用gmaps4rails动态加载Google地图标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！