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

enter image description here

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

Answer 2

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

MarkerCluster：DEMO

Marker Spiderfier：DEMO

Answer 3

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

Answer 4

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

Answer 5

使用群集.make标记组作为cluster.one群集将在其中显示许多标记。

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

5 个答案: