ruby-on-rails - 如何将spiderfier js与gmaps4rails gem集成？ (同一 lat,lng 上的多个标记)

Question

我在尝试集成蜘蛛侠时有点挣扎 https://github.com/jawj/OverlappingMarkerSpiderfier与 https://github.com/apneadiving/Google-Maps-for-Rails

在我的 map.html.haml 中:

= gmaps(:markers => {:data => @map, :options => { "rich_marker" => true, :raw => '{ animation: google.maps.Animation.DROP }' } }, :map_options => { :draggable => true, :auto_zoom => false, :zoom => 9, :disableDefaultUI => false, :scrollwheel => true, :disableDoubleClickZoom => true, :custom_infowindow_class => "province" })

- content_for :scripts do
:javascript
    Gmaps.map.infobox = function(boxText) {
        return {
             content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, -50)
            ,alignBottom: true
            ,zIndex: 999
            ,hideCloseButton: false
            ,boxStyle: { 
                background: "white"
                ,width: "280px"
                ,padding: "10px"
                ,border: "1px solid #b2b2b2"
                ,arrowStyle: 0
                ,arrowPosition: 50
                ,arrowSize: 20
                 }

            ,infoBoxClearance: new google.maps.Size(10, 10)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false

     }};

这工作正常，但如何集成蜘蛛侠 https://github.com/jawj/OverlappingMarkerSpiderfier#how-to-use ?

Answer 1

这是一个使用旧版本 Gmaps 4 Rails 的老问题，但是对于任何有兴趣在最新版本中使用这两个库的人，这里是如何做到的。

此示例基于 documentation sample code

handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
  markers = handler.addMarkers([
    {
      "lat": 0,
      "lng": 0,
      "picture": {
        "url": "https://addons.cdn.mozilla.net/img/uploads/addon_icons/13/13028-64.png",
        "width":  36,
        "height": 36
      },
      "infowindow": "hello!"
    }
  ]);
  handler.bounds.extendWith(markers);
  handler.fitMapToBounds();

  // Create a OverlappingMarkerSpiderfier instance
  var oms = new OverlappingMarkerSpiderfier(handler.getMap(), {
    keepSpiderfied: true
    // Other options you need
  });

  // Track each marker with OMS
  _.each(markers, function(marker) {
    oms.addMarker(marker.getServiceObject());
  });
});

这里重要的是深入了解 Gmaps4Rails 包装在其自己的类中的原生 Google 对象。

如果您需要标记上的单击事件，请将单个处理程序添加到 oms正如所解释的 in the doc .