如何将信息窗口添加到集群标记？

Question

这方面的文档和 stackoverflow 票非常稀少。

当用户鼠标悬停在集群标记上时，我想打开一个信息窗口。我希望使用两件事来生成这个信息窗口，一个来自集群标记的数据，一个是 Rails 部分。

我该怎么做：

1. 向集群添加鼠标悬停监听器
2. 获取集群内的标记（选择正确的对象）为此创建一个信息窗口
3. 基于部分的集群（使用上述数据）

我正在使用谷歌地图来获取铁路的 gem 和 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”事件。我想使用 MarkerClusterPlus 鼠标悬停事件，但我不知道应该将哪个 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 对象，但我想要得到的是我刚刚将鼠标悬停在上面的特定集群及其包含的标记。我需要获取第一个标记的城市名称（或纬度/经度），然后获取它所在的区域，以便我可以将此数据传递到信息窗口。

我可以在点击时打开一个基本的信息窗口。我想以类似于我的标记的方式从部分打开信息窗口。

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

我该如何做这三件事？

Answer 1

更新：

使用 google maps api、marker cluster 和文档，我能够将大部分内容拼凑在一起。

我可以添加这 3 件东西，但我现在需要最后一件（回答乱序）：

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);
         };
     });
   

2. 基于部分的集群信息窗口（使用上述数据）

我还创建了一个对象，其中键的纬度和部分的值。

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 %>
}

1. 获取集群内的标记（选择正确的对象）为此创建一个信息窗口

然后我找到了标记并通过纬度键将其与城市匹配。见上面2个代码sn-ps。

1. 最后我希望信息窗口看起来和行为像常规标记，为此我创建了一个新函数：

   clusterMarker: function(clu​​ster, city_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 助手的编译部分。该对象被转义并传递给 javascript。该对象以城市的纬度为键，其各自区域的部分区域为值。

  var cities_with_lat = <%= cities_with_lat_obj %>;