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

Marker Spiderfier:DEMO