Google Maps v2：如何显示具有相同坐标的各种标记

Question

我正在使用 Google Maps JavaScript API V2 来标记保存在数组中的位置。具有不同坐标的标记显示得很好，但我不知道如何显示具有相同坐标的各种标记。我需要它，因为位置数组可以具有相同的坐标，但具有不同的描述。显示这些不同描述的方式是什么？

添加标记的代码是：

var map;

    function loadEarth(mapdiv) {
        if (GBrowserIsCompatible()) {
            if(!mapdiv)
                return true;
            map=new GMap2(document.getElementById("map"));
            map.enableDoubleClickZoom();
            map.enableScrollWheelZoom();
            map.addControl(new GMapTypeControl());
            map.addControl(new GSmallMapControl());
            map.setCenter(new GLatLng(40.186718, -8.415994),13);
            }
    }
    function createMarker(point, number, description) {
        var marker = new GMarker(point);
        marker.value = number;
        GEvent.addListener(marker, "click", function() {
        var myHtml = "<b>#" + number + "</b><br/>" + description;
            map.openInfoWindowHtml(point, myHtml);
        });
        return marker;
    }

...

for(var i=0; i<gl_list.length; i++){
   var point = new GLatLng(gl_list[i].Latitude,gl_list[i].Longitude);
   description = "Visited place : "+gl_list[i].nome+" on : "+gl_list[i].data;
   map.addOverlay(createMarker(point, i + 1, description));
}

感谢您的关注。

Answer 1

我经常在我的地图上遇到完全相同的问题，并且发现自己担心相同的多个标记问题：哪个标记在顶部？用户如何看到它们？等等

最终，我认为问题实际上与标记无关；它实际上是关于地图上的特定点。从用户的角度来看，他们可能不太关心标记或标记周围的任何机制。他们真正关心的是与那个位置相关的信息。从这个角度来看，挑战在于找到一种方法来为用户提供一种以直接方式查看相关信息的方法。所以我决定将所有占据相同位置的标记合并为一个标记，其中包含对用户重要的所有信息。

一步一步，这是我用来解决同一位置多个标记问题的方法：

第 1 步： 对标记数据进行排序，以便识别占据相同位置的标记：

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

第 2 步：添加一个新函数，为 gl_list 数组的同位成员创建一个“特殊”标记：

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 GLatLng( mrkrData.Latitude, mrkrData.Longitude );
    var marker = new GMarker( point );
    GEvent.addListener(marker, "click", function() {
    map.openInfoWindowHtml( point, infoWinContent );
});

    return marker;
}

第 3 步：遍历标记数据，识别具有相同位置的分组，使用特殊标记在地图上显示它们，并处理所有标记其他位置的数据“正常”：

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

    if ( i < ( gl_list.length - 1 ) ) {
        do {
            var next = assetData[ i + ++j ];
            if ( next !== undefined ) {    //just to be safe
                if ( next.Latitude === current.Latitude &&
                        next.Longitude === current.Longitude ) {
                    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 GLatLng(gl_list[i].Latitude,gl_list[i].Longitude);
        description = "Visited place : "+gl_list[i].nome +
                        " on : " + gl_list[i].data;
        map.addOverlay( createMarker( point, i + 1, description ) );
    }
}

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

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

Answer 2

您可以尝试使用 MarkerCluster 或 Marker Spiderfier 在相同坐标处显示标记

MarkerCluster：DEMO

标记蜘蛛侠：DEMO

Answer 3

您是否考虑过使用自定义图标来表示具有相同坐标的多个位置？您可以按照上面的建议将所有公共位置汇总到一个标记点​​中，而不是在公共位置（+/- .00001 纬度）的左右两侧添加看起来像按钮的其他标记点。比将单击事件附加到代理点，通过单击标记点将允许您在共享位置上的点之间进行迭代。您甚至可以根据数组中显示的当前制造商隐藏或禁用下一个和上一个标记。

Answer 4

一个想法可能是仅绘制独特的位置，并将描述汇总到位置级别。对于叠加层，您可以显示该位置的完整地点列表。

Answer 5

使用聚类。将一组标记作为聚类。一个聚类将在内部呈现许多标记。