Google maps api 3 将标记分组，以便更好地查看地图

我创建了一个功能，可以在谷歌地图上显示我的所有照片。我对结果感到非常高兴，但问题是很多标记几乎都在同一个点上（见图1）。我已经测试了MarkerClustererPlus解决方案，但当我将其放大到最大值时，它并没有显示所有标记（请参见图2，地图上的位置与图1上的位置相同）

如果有10个以上的标记靠在一起，我需要一个显示单个标记的函数（见图3）。当我点击这些分组标记时，会出现一个信息窗口，显示属于分组标记的所有分组照片，如果你知道我的意思的话。我怎样才能完成这样的事情

提前谢谢

图片#1

图片#2

图片#3

答案：很接近你想要的 我想。它包括：

• 对标记进行排序并识别占用相同位置的标记
• 将同一位置的标记合并为单个标记
• 创建一个

  InfoWindow

  ，在表中为共享同一位置的标记显示单独的数据

我相信，您只需更改在同一位置标识标记的逻辑，以标识一组靠近的特定标记，然后修改

InfoWindow

内容以显示您的照片，而不是当前示例中显示的数据。这两种改变似乎都很简单

编辑以更新原始答案以使用Google Maps v3： 步骤1:对标记数据进行排序，以便识别占用相同位置的标记：

markerArray.sort( function( a, b ) {
    var aLat = a.Latitude, bLat = b.Latitude;               
    if ( aLat !== bLat ) { return aLat - bLat; }
    else { return a.Longitude - b.Longitude; }
});

步骤2:添加一个新函数，该函数为

markerary的同址成员创建一个“特殊”标记

：

var specialMarkers = null;

function createSpecialMarker( specialMarkers ) {
    var infoWinContent = "<table class='special-infowin-table'>";

    for ( var i = 0; i < specialMarkers.length; i++ ) {
        infoWinContent +=
            "<tr>" +
            "<td class='special-table-label'>" +
                "Visited Place [" + (i+1) + "]" +
            "</td>" + 
            "<td class='special-table-cell'>" +
                specialMarkers[i].nome + " on : " + specialMarkers[i].data +
            "</td></tr>";
    }
    infoWinContent += "</table>";

    var mrkrData = specialMarkers[0];
    var point = new google.maps.LatLng( mrkrData.Latitude, mrkrData.Longitude );
    var marker = new google.maps.Marker( point );
    google.maps.event.addListener(marker, "click", function() {
        map.openInfoWindowHtml( point, infoWinContent );
    });

    return marker;
}

这样做的目的是生成一个标记，并让InfoWindow传达有关位置的多条重要信息，最终得到如下结果：

---

我还没有运行这个实际的代码，但它是基于每天运行的代码。这更旨在让您对该方法有一个相当详细的了解，并共享一系列代码，这些代码将使您非常接近一个可用的解决方案，同时了解它可能需要一些调整和调试。

Sweet！我将尽快尝试您的函数：尽管存在问题-未定义

gl\u列表

。我怎样才能解决这个问题？Worth说我正在使用Google Maps JavaScript v3。

gl_列表

是我从原始问题中复制出来的，只是为了在海报给出的代码示例中给出答案上下文。它是一个JavaScript

数组

，包含所有标记。我刚刚想起一些答案是为Google Maps v2 API编写的，所以我更新了代码以使用v3，并将其添加到上面的原始答案中。非常感谢您的编辑，但我无法让它工作！我一直收到这个错误消息：

uncaughtreferenceerror:markerary未定义（匿名函数）

。我现在是这样得到它的：好吧，我无法编写这部分代码。我在代码示例中引用了

markerArray

，向您展示了如何使用JavaScript

Array

标记。但是您必须创建

markerArray

，以便它在我所展示的函数的范围内。您还必须拥有标记的数据，并使用这些数据调用我提供的函数。因此，我想您必须执行一个步骤0：创建

markerary

，并用标记数据加载它。这有意义吗？

var margin = 50;
for ( var i = 0; i < markerArray.length; i++ ) {
    var current = markerArray[i];
    var coLocated = null;
    var j = 0, matchWasFound = false;

    if ( i < ( markerArray.length - 1 ) ) {
        do {
            var next = markerArray[ i + ++j ];
            if ( next !== undefined ) {    //just to be safe
                if ( ( ( next.Latitude - current.Latitude ) < margin ) &&
                       ( ( next.Longitude - current.Longitude ) < margin ) )
                {
                    matchWasFound = true;
                    if ( coLocated === null ) {
                        coLocated = new Array( current, next);
                    }
                    else { coLocated.push( next ); }
                }
                else { matchWasFound = false; }
            }
            else { matchWasFound = false; }
        }
        while ( matchWasFound )

        if ( coLocated != null ) {
           var coLoMarker = createSpecialMarker( coLocated );
            if ( specialMarkers === null ) {
                specialMarkers = new Array( coLoMarker );
            }
            else {
                specialMarkers.push( coLoMarker );
            }

            i += --j;
            continue;
        }

        var point = new google.maps.LatLng(
            markerArray[i].Latitude, markerArray[i].Longitude);
        description = "Visited place : " + markerArray[i].name +
                        " on : " + markerArray[i].data;
         //Simply creates a regular marker:
        createMarker( point, i + 1, description );
    }
}