簡體   English   中英

Google Maps v2:如何使用相同的坐標顯示各種標記

[英]Google Maps v2: how to display various markers with the same coordinates

我正在使用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));
}

感謝您的關注。

我經常在我的地圖上遇到完全相同的問題,發現自己擔心同樣的多個標記問題:哪個標記位於頂部? 用戶如何看待它們? 等等

最后,我認為問題實際上並不是關於標記的問題; 它真的是關於地圖上的特定 從用戶的角度來看,他們可能不太關心標記或標記周圍的任何機制。 他們真正關心的是與該位置相關的信息。 從這個角度來看,挑戰在於找到一種方法來為用戶提供一種以直接方式查看相關信息的方法。 因此,我決定將占據相同位置的所有標記合並到一個標記中,該標記包含對用戶而言重要的所有信息。

一步一步,這是我用來解決同一位置問題中的多個標記的方法:

步驟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傳達有關重要位置的多條信息,最后得到如下內容:

在此輸入圖像描述

現在我沒有運行這個實際代碼,但它基於每天運行的代碼。 這更傾向於讓您詳細了解該方法,並分享一組代碼,這些代碼應該讓您非常接近可用的解決方案,並了解它可能需要進行一些調整和調試。

您可以嘗試使用MarkerCluster或Marker Spiderfier在相同的坐標上顯示標記

MarkerCluster: DEMO

Marker Spiderfier: DEMO

您是否考慮過使用自定義圖標來表示具有相同坐標的多個位置? 如上所述,您可以將所有常用位置匯總到一個標記點​​,而不是在公共位置的直接左右兩側添加看起來像按鈕的其他標記點(+/- .00001緯度)。 然后將單擊事件附加到代理點,通過單擊標記點將允許您在共享位置上的點之間進行迭代。 您甚至可以根據當前制造商在陣列中顯示的內容隱藏或禁用下一個和上一個標記。

一個想法可能是僅繪制唯一位置,並將描述匯總到位置級別。 對於疊加層,您可以顯示該位置的完整位置列表。

使用聚類.make標記組作為cluster.one聚類將在內部呈現許多標記。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM