分组标记以便在地图上更好地查看

Question

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

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

提前致谢。

图片#1

图片#2

图片#3

Answer 1

答案：https://stackoverflow.com/a/10674273/1314132 与您要查找的内容接近 我认为。它涵盖：

• 对标记进行排序并识别占据相同位置的标记。
• 将同一位置的标记合并为一个标记。
• 创建一个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 步：添加一个新函数，为markerArray 的同位成员创建一个“特殊”标记：

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;
}

第 3 步： 遍历标记数据，确定位置纬度和经度都在预定义margin 内的分组，在地图上显示它们使用特殊标记，并“正常”处理其他位置的所有标记数据：

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 );
    }
}

这个想法是产生一个单一的标记，让 InfoWindow 传达关于位置的多条重要信息，最终得到如下所示的内容：

我没有运行这个实际的代码，但它是基于每天运行的代码。这更多是为了让您对这种方法有一个相当详细的了解，并分享一段代码，这些代码应该让您非常接近可用的解决方案，但要理解它可能需要一些调整和调试。