我在尝试集成spiderfier时有点吃力https://github.com/jawj/OverlappingMarkerSpiderfier具有https://github.com/apneadiving/Google-Maps-for-Rails
在我的地图.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
}};
这很好,但如何集成spiderfierhttps://github.com/jawj/OverlappingMarkerSpiderfier#how-使用?
使用Gmaps 4 Rails的旧版本是一个老问题,但对于任何有兴趣在最新版本中使用这两个库的人来说,以下是如何做到这一点。
此示例基于文档示例代码
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
添加一个处理程序,如文档中所述。