Question

此区域的文档和stackoverflow票证非常稀少。

当用户将鼠标悬停在群集标记上时，我想打开一个infowindow。我希望使用两个东西生成这个信息窗口，一个来自集群标记的数据，以及一个部分的rails。

我如何：

将鼠标悬停监听器添加到群集
获取群集内的标记（选择正确的对象）为此
基于部分的集群（使用上述数据）

我正在使用谷歌地图作为铁路宝石和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
    }
  });

我已将以下脚本添加到带有地图的页面上。这会听取群集点击＆＃39;事件。我想使用MarkerClustererPlus鼠标悬停事件，但我无法弄清楚应该将哪个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对象，但我想要得到的是我刚刚鼠标悬停的特定集群及其包含的标记。我需要获取第一个标记的城市名称（或纬度/经度），然后获取它所在的区域，这样我就可以将这些数据传递给信息窗口。

我可以通过点击打开基本信息窗口。我希望infowindow的开放部分类似于我的标记。

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

我如何做这三件事？

Answer 1

<强>更新

使用google maps api，以及标记群集和文档，我能够将大部分内容组合在一起。

我能够添加这3件事，但我现在需要最后一件（按顺序回答）：

将鼠标悬停监听器添加到群集

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

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

我还创建了一个对象具有纬度的对象，以及带有部分的值。

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个代码段。

最后我想要infowindow Look并且表现得像常规标记，为此我创建了一个新功能：

clusterMarker：function（cluster，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帮助器的编译部分的对象。此对象已转义并传递给javascript。该对象将城市的纬度作为关键，将其各自区域的一部分作为值。

  var cities_with_lat = <%= cities_with_lat_obj %>;

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

1 个答案: