javascript - 谷歌地图 v2 : how to display various markers with the same coordinates

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

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

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

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

第 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 步: 迭代标记数据，识别具有相同位置的分组，使用特殊标记在 map 上显示它们，并处理所有标记其他位置的数据“正常”:

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 传达有关位置的多个重要信息，最终得到如下所示的内容:

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