javascript - 谷歌地图集群下拉菜单？

Question

我正在使用 Google map 在世界上放置图钉，并且我正在使用 markercluster.js当引脚太靠近时将它们聚集在一起。我想做的是让您可以将鼠标悬停在一组图钉上，然后会出现一个下拉菜单，显示该区域中图钉的标题。

我在论坛上没有看到任何关于此问题的内容，所以我想也许其他人可能遇到过这个问题并已经找到了解决方案。感谢您提前提供的任何帮助!

我的代码只是将图钉添加到 Google map API 的典型方法。但为了以防万一，我会在这里列出它。

var bounds = new google.maps.LatLngBounds();
var markers = [];
for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
            //icon: '/bin/images/people/' + locations[i][4] + '-1.jpg'
    });
    markers.push(marker);
    bounds.extend(marker.position);
    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
        return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker)
        }
    })(marker, i))
}
var clusterStyles = [{
    textColor: 'white',
    url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png',
    height: 50,
    width: 50
}, {
    textColor: 'white',
    url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png',
    height: 50,
    width: 50
}, {
    textColor: 'white',
    url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png',
    height: 50,
    width: 50
}];
var mcOptions = {
    gridSize: 50,
    styles: clusterStyles,
    maxZoom: 15
};

var markerCluster = new MarkerClusterer(map, markers, mcOptions);

map.fitBounds(bounds);
var listener = google.maps.event.addListener(map, "idle", function() {
    map.setZoom(3);
    google.maps.event.removeListener(listener)
});

Answer 1

您可以考虑以下方法。

通过引入将在 mouseover 事件上触发的 clustermouseover 事件来修改 ClusterIcon:

//Note: the remaining code is omitted from this function
ClusterIcon.prototype.onAdd = function() {
    this.div_ = document.createElement('DIV');

    var panes = this.getPanes();
    panes.overlayMouseTarget.appendChild(this.div_);

    var that = this;

    google.maps.event.addDomListener(this.div_, 'mouseover', function() {
        that.triggerClusterMouseOver();
    });

};

哪里

ClusterIcon.prototype.triggerClusterMouseOver = function () {
    var markerClusterer = this.cluster_.getMarkerClusterer();
    google.maps.event.trigger(markerClusterer, 'clustermouseover', this.cluster_);
};

附加事件处理程序以显示相应的信息。以下示例演示如何显示名称列表:

google.maps.event.addListener(markerClusterer, 'clustermouseover', function(clusterer) {
    var markers = clusterer.getMarkers();

    markers.forEach(function(marker){
        infowindow.content += '<div>' + marker.title + '</div>';
    });
    infowindow.setPosition(clusterer.getCenter());
    infowindow.open(clusterer.getMap());
});

示例:Plunker