javascript - 如何模拟用户点击包含特定标记的谷歌地图集群

Question

我有一个应用程序，用户可以在其中搜索某个地址周围的特性列表，结果呈现为

1. map 上的标记，有些标记会聚集
2. 一个包含列表格式搜索结果的 div。

div 中的每个单独列表与标记之间不存在 1:1 关系。b/c 某些标记包含在一个簇中。

我试图实现的用例是用户单击 div 上的列表，然后它会自动

• 将 map 平移至列表
• 显示列表的信息框。

这对于已经存在的标记来说效果很好。然而，对于隐藏在簇后面的标记..这不起作用。

我尝试为 map 缩放时设置一个事件监听器，如下所示:

google.maps.event.addListener(map, 'zoom_changed', function() {
   // assume that the the cluster broke up and the marker got rendered by now
   ..
});

但这不起作用..这也可能是由于缩放级别不足以分解集群..但在这种情况下，我如何确定该级别是什么？我基本上想做的是模拟用户单击他们感兴趣的列表所属的集群，这将导致集群分解、 map 放大和标记显示。

Answer 1

我正在做类似的事情。我显示一个表格，当单击 map 上的一行时，会平移到匹配的标记。我建议您在标记指令上使用 clusteroptions 属性。我的看起来像这样:

 clusteroptions="{ averageCenter: true, minimumClusterSize: 8, gridSize: 30, maxZoom: 14 }

然后当您单击一行时:

        $scope.zoomToSelectedOrder = function(orderNumber) {
        var matchingMarker = $scope.filteredMarkers.filter(function(matchingMarker) {
            return matchingMarker.orderNumber === orderNumber;
        })[0];

        $scope.map.center = { latitude: matchingMarker.latitude, longitude: matchingMarker.longitude };
        $scope.map.zoom = 22;
    };

通过将 map 缩放设置为 22(任何高于 clusteroptions maxZoom 的数字)，您可以确保集群被分解。

下面是一个示例，显示一些随机生成的标记的第 0 个数组元素被放大，并在单击按钮时显示其窗口:

http://plnkr.co/edit/PkHAP9m3UAoiQE422jUo?p=preview