如何将infowindow添加到群集标记？

我想打开一个infowindow，当用户鼠标悬停的群集标记。我希望使用两件事情来创建这个infowindow，一组数据来自集群的标记，另一部分是导轨。

我如何：

添加鼠标悬停监听到集群
获取群集内的标记（选择合适的对象）创建基于部分本
集群信息窗口（使用上面的数据）

我正在使用谷歌地图的铁路宝石和Marker Clusterer Plus库。

我在我的建设者如下：

handler = Gmaps.build("Google", 
    { markers: 
    { clusterer: { 
     gridSize: 8, 
     maxZoom: 12, 
     zoomOnClick: true, 
     styles: [ { 
       textSize: 1, 
       textColor: '#45A6DD', 
       url: 'images/maps/cluster.marker.png', 
       height: 51, 
       width: 51 } 
      ] 
     } 
    }, 
    builders: { 
     Marker: KhMarker 
    } 
    });

而且我已经添加下面的脚本到与地图的页面。这听取'clusterclick'事件。我想使用MarkerClustererPlus mouseover事件，但我无法弄清楚应该将哪个js对象传递给addListener事件。

google.maps.event.addListener(handler.clusterer.getServiceObject(), 'clusterclick', function(cluster) { 
     // console.log("Cluster clicked") 

     var content = ''; 

     content = this; 
     console.log (content) 

     // Convert lat/long from cluster object to a usable MVCObject 
     // var info = new google.maps.MVCObject; 
     // info.set('position', cluster.center_); 

     // var infowindow = new google.maps.InfoWindow(); 
     // infowindow.close(); 
     // infowindow.setContent(); 

     // infowindow.open(handler.map.getServiceObject(), info); 
    });

在我看到的MarkerClusterer对象控制台，但我想获得的是特定的集群我只是鼠标放在和它所包含的标记。我需要抓住第一个标记的城市名称（或lat/long），然后获取它所来自的区域，以便我可以将此数据传递给infowindow。

我可以得到一个基本infowindow打开点击。我想让infowindow从部分类似于我的标记的方式打开。

marker.infowindow render_to_string(partial: "/destinations/map_tile.html", locals: { city: city })

我该如何做这3件事？

来源

2014-07-08 nilesvm

@apneadiving我该怎么做？ – nilesvm

UPDATE：

使用谷歌地图API和标记集群Plus文档我能拼凑这个最在一起。

我能够添加这些三件事情，但我现在需要1个最后一块（回答出的顺序排列）：

添加鼠标悬停监听到集群

google.maps.event.addListener(handler.clusterer.getServiceObject(), 'mouseover', function(cluster) { 
     // Convert lat/long from cluster object to a usable MVCObject 
     var info = new google.maps.MVCObject; 
     info.set('position', cluster.center_); 

     var city_lat = cluster.getMarkers().shift().position.d 

     if (city_lat !== undefined) { 
     var cluster_stuff = cities_with_lat[city_lat] 

     var infowindow = new google.maps.InfoWindow({ 
      content: cluster_stuff 
     }); 
     infowindow.open(handler.map.getServiceObject(), info); 
     }; 
    });

集群infowindow基于部分（使用上面的数据）

我还创建了一个lati对象用于键的tudes，以及用于部分的值。

var cities_with_lat = { 
    <% @cities_for_map.each do |city| %> 
    <% if city.areas.present? %> 
     <% render 'map_tile', city: nil, area_info: city.areas.first %> 
     <%= city.latitude %>: "<%= escape_javascript(render 'map_tile', city: nil, area_info: city.areas.first) %>", 
    <% end %> 
    <% end %> 
}

获取群集内的标记（选择合适的对象）这个

这时我才发现标记，并通过纬度重点城市匹配它创建一个信息窗口。请参阅上面的2个代码片段。

最后我想要的信息窗口的外观和行为像常规指标，要做到这一点我创建了一个新功能：

clusterMarker：功能（集群，cities_with_lat）{VAR = city_lat cluster.getMarkers（）;

cluster_marker = new google.maps.Marker({ 
map: handler.map.getServiceObject(), 
position: new google.maps.LatLng(cluster.center_.d, cluster.center_.e), 
visible: false 
}); 

var boxText = document.createElement("div"); 
boxText.innerHTML = cities_with_lat[city_lat[0].position.d]; 

var myOptions = { 
    content: boxText 
    ,disableAutoPan: true 
    ,closeBoxURL: "" 
    ,pane: "floatPane" 
    ,enableEventPropagation: false 
}; 

ib = new InfoBox(myOptions); 
ib.open(handler.map.getServiceObject(), cluster_marker); 
_closeClusterInfowindow(ib);

} };

我给这个函数提供了一个带有rails helper的编译partials的对象。该对象已被转义并传递给javascript。这个对象把城市的纬度作为一个关键，并把它作为一个价值的一部分。

var cities_with_lat = <%= cities_with_lat_obj %>;

来源

2014-07-22 18:57:08 nilesvm

如何将infowindow添加到群集标记？

回答

相关问题