谷歌地图中使用 MarkerClusterer 的两种类型的标记答案

【问题标题】：Two types of markers in Google Maps using MarkerClusterer谷歌地图中使用 MarkerClusterer 的两种类型的标记
【发布时间】：2013-05-18 02:30:30
【问题描述】：

我有两种地理位置信息：一种是确切位置，另一种是近似的区域级地理位置。当我在地图上显示这些信息时，我希望能够为每种位置使用不同的标记类型，确切的位置将是绿色的，而近似的位置将是蓝色的。我正在使用 MarkerClusterer 将标记分组到一个气泡中，但是，我需要两个 MarkerClusterer，一个用于近似位置，另一个用于精确位置。这样一来，我的 MarkerCluster 就适用于每种地理位置。

我的问题是：有时，两个集群重叠，这可能会导致混淆：

如您所见，它显示我在那里有 7 个标记（这里是蓝色的，但实际上是绿色的标记，因为这些地理位置是确切的类型）。

但是，放大后，我有 9 个，因为第二个集群在第一个集群下方（请注意，现在展位集群具有相同的颜色，它应该是绿色 (7) 和蓝色 (2) - 所以用户可以确定（2）个位置是近似的）

关于如何制作集群集群的任何想法？还是另一种方式让用户知道有两种信息？

【问题讨论】：

标签： google-maps-api-3 google-maps-markers markerclusterer

【解决方案1】：

如果您只有两个（或几个）标记类，那么一种方法是创建第二个 MarkerClusterer 实例。因此，让我们有两组样式（未显示）不同的选项：

var mcOptions1 = {gridSize: 40, styles: clusterStyles1, maxZoom: 19};       
var mcOptions2 = {gridSize: 40, styles: clusterStyles2, maxZoom: 19 };

然后您可以构建两个单独的标记数组，例如标记 1 和标记 2，在我的情况下，这取决于标记的 status 属性：
（请注意，每个标记也照常添加到地图中，未显示）

// push to the array, markers[]
    switch(status)
    {
    case 'Include':
        markers1.push(marker);
      break;
    case 'Exclude':
        markers2.push(marker);
      break;
    default:
        markers1.push(marker);
    };

最后，创建两个 MarkerClusterer 实例，每个实例都有单独的数组和选项

var markerClust1 = new MarkerClusterer(map, markers1, mcOptions1);
var markerClust2 = new MarkerClusterer(map, markers2, mcOptions2);

地图上的结果显示两种样式的标记图标和两种样式的集群。当您缩小两个单独的标记时，永远不会聚集在一起 - 我认为这正是您所需要的，而且它在地图上看起来不错！（我想发布一些地图图片，但在我的声誉提高之前不能发布图片！）

我确实使用了后来的 MasterClusterPlus 而不是早期的 MasterClusterer，但我看不出该方法不适用于早期版本的任何原因。

【讨论】：

【解决方案2】：

我现在正在处理这个问题。您可以使用qurn 所说的内容，并更改clustermarker 样式，这样图标就不会重叠。

        var clusterStyles = [
        {   
            url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/conv30.png',
            height: 27,
            width: 30,
            anchor: [3, 0],
            textColor: '#11ffbb',
            textSize: 10,
            offsetX: 20,
            offsetY: 20
          }, {
            url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/conv40.png',
            height: 36,
            width: 40,
            anchor: [6, 0],
            textColor: '#ff0000',
            textSize: 11,
            offsetX: 20,
            offsetY: 20
          }, {
            url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/conv50.png',
            width: 50,
            height: 45,
            anchor: [8, 0],
            textSize: 12,
            offsetX: 20,
            offsetY: 20
          }
        ];

        var mcOptions = {
            styles: clusterStyles
        };

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

然后设置“offsetX”和“offsetY”属性。例如：如果您有 4 个类别/组，则可以使用偏移量：-20,-20 | -20,20 | 20, -20 | 20,20 目标是让图标围绕您的观点。

如果这对您没有帮助，请查看Google Maps Spiderfier。

希望对您有所帮助。

【讨论】：