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

Question

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

如果关闭的标记超过10个，我想要一个显示单个标记的函数（参见图3）。当我点击这些分组的标记时，如果你知道我的意思，就会出现一个infowindow并显示属于分组标记的所有分组照片。我怎样才能完成这样的事情？

提前致谢。

图片＃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传达有关重要位置的多条信息，最后得到如下内容：

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