使用 MarkerClusterer 在 Google 地图中添加两种类型的标记

Question

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

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

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

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

关于如何制作集群集群有什么想法吗？或者另一种方式让用户知道有两种信息？

Answer 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，但我看不出有任何理由表明该方法不适用于早期版本。

Answer 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。

希望有帮助。

Answer 3

我用这个解决了这个问题

function addRandomOffset(latlng) {
                    const randomOffset = Math.random() * 0.0011; // Adjust the value as needed
                    return new google.maps.LatLng(latlng.lat() + randomOffset, latlng.lng() + randomOffset);
                }
                // Calculate a single random offset
                const randomOffset = Math.random() * 0.0011; // Adjust the value as needed

并将此函数添加为 google.maps.Marker 中的位置