3

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

  1. 地图上的标记，一些将被聚集
  2. 包含列表格式搜索结果的 div..

div 中的每个单独列表与标记之间没有 1:1 的关系。b/c 一些标记包含在一个集群中。

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

  • 将地图平移到列表
  • 显示列表的信息框。

这适用于已经存在的标记。但是对于隐藏在集群后面的标记..这不起作用。

我尝试为地图缩放时设置一个事件侦听器，如下所示：

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

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

4

1 回答 1

0

我正在做类似的事情。我显示一个表格，当在地图上单击一行时，将平移到匹配的标记。我建议您在您的标记指令中使用 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;
    };

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

这是一个示例，显示了一些随机生成的标记的第 0 个数组元素被缩放到并在单击按钮时显示其窗口：

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

于 2014-08-20T21:38:12.210 回答