Rails,Gmaps4rails,地理编码器,谷歌地图标记集群奇怪的行为

时间:2016-01-09 18:38:18

标签: ruby-on-rails google-maps gmaps4rails markerclusterer rails-geocoder

在我的搜索页面上,我有一个谷歌地图,上面有每个“工作”的标记。我已将地图默认设置为缩放级别2,其中标记正确聚类,但只要我通过缩放级别5,聚类就会停止工作。我搜索过,但没有找到任何相关信息。

搜索页面地图javascript:            

  <script type="text/javascript">
  var mapStyle = [{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"on"},{"lightness":33}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2e5d4"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#c5dac6"}]},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{"featureType":"road","elementType":"all","stylers":[{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#c5c6c6"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#e4d7c6"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#fbfaf7"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"},{"color":"#acbcc9"}]}];
  var handler = Gmaps.build('Google');
    handler.buildMap({
      provider: {
        styles: mapStyle,
        minZoom: 2,
        maxZoom: 18,
        center: new google.maps.LatLng(20.68177501, -103.3514794)
      },
      internal: {id: 'map'}},
      function(){
      markers = handler.addMarkers(<%=raw @hash.to_json %>);
      handler.bounds.extendWith(markers);
      handler.fitMapToBounds();
    });
  </script>

乔布斯控制器:

 def index
    if params[:search].present?
    @q = Gig.near(params[:search], 200, :order => 'distance' ).ransack(params[:q])
    @gigs = @q.result(distinct: true)
    @hash = Gmaps4rails.build_markers(@gigs) do |gig, marker|
      marker.lat gig.latitude
      marker.lng gig.longitude
      marker.title gig.title
    end
    else
@q = Gig.ransack(params[:q])
    @gigs = @q.result(distinct: true)
    @hash = Gmaps4rails.build_markers(@gigs) do |gig, marker|
      marker.lat gig.latitude
      marker.lng gig.longitude
      marker.title gig.title
    end
  end
end

对此的任何见解都会很棒,谢谢。

1 个答案:

答案 0 :(得分:3)

相关代码lives here

Here is您可以在其中自定义行为。

因此您可以调整maxZoom级别:

var handler = Gmaps.build('Google', { 
  markers: { 
    clusterer: { 
      maxZoom:  8, 
      gridSize: 50 
    }
  }
});