0

すべての写真を Google マップのトラフ マーカーに表示する関数を作成しました。結果にはとても満足していますが、問題は多くのマーカーがほぼ同じ場所にあることです (写真 #1 を参照)。MarkerClustererPlus ソリューションをテストしましたが、最大にズームしたときにすべてのマーカーが表示されるわけではありません (画像 #2 を参照してください。マップ上の位置は画像 #1 と同じです)。

10 個を超えるマーカーが近接している場合に単一のマーカーを表示する関数が必要です (図 3 を参照)。これらのグループ化されたマーカーをクリックすると、情報ウィンドウが表示され、グループ化されたマーカーに属するすべてのグループ化された写真が表示されます。どうすればこのようなことを達成できますか?

前もって感謝します。

写真＃1 同じ場所にたくさんのマーカー

写真＃2 MarkerClustererPlus の問題

写真＃3 グループ化されたマーカーの改善

4

1 に答える 1

1

答え：https ：//stackoverflow.com/a/10674273/1314132はあなたが探しているものに近いと思います。それはカバーします：

  • マーカーの並べ替えと、同じ場所を占めるマーカーの識別。
  • 同じ場所にあるマーカーを1つのマーカーにマージします。
  • InfoWindow同じ場所を共有するマーカーのテーブルに個別のデータを表示するシングルを作成します。

同じ場所にあるマーカーを識別するロジックを変更して、近くにある特定のマーカーセットを識別し、InfoWindowコンテンツを変更して、現在の例に示されているデータではなく写真を表示する必要があると思います。これらの両方の変更を行うのはかなり簡単なようです。

Google Mapsv3を使用するために元の回答を更新する編集：

ステップ1：マーカーデータを並べ替えて、同じ場所を占めるマーカーを識別できるようにします。

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

ステップ2：：の同じ場所に配置されたメンバーの「特別な」マーカーを作成する新しい関数を追加しますmarkerArray。

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 google.maps.LatLng( mrkrData.Latitude, mrkrData.Longitude );
    var marker = new google.maps.Marker( point );
    google.maps.event.addListener(marker, "click", function() {
        map.openInfoWindowHtml( point, infoWinContent );
    });

    return marker;
}

ステップ3：マーカーデータを反復処理し、緯度と経度の両方が事前定義された場所にあるグループを特定marginし、特別なマーカーを使用してそれらを地図上に表示し、他の場所ですべてのマーカーデータを「通常」処理します。

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

    if ( i < ( markerArray.length - 1 ) ) {
        do {
            var next = markerArray[ i + ++j ];
            if ( next !== undefined ) {    //just to be safe
                if ( ( ( next.Latitude - current.Latitude ) < margin ) &&
                       ( ( next.Longitude - current.Longitude ) < margin ) )
                {
                    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 google.maps.LatLng(
            markerArray[i].Latitude, markerArray[i].Longitude);
        description = "Visited place : " + markerArray[i].name +
                        " on : " + markerArray[i].data;
         //Simply creates a regular marker:
        createMarker( point, i + 1, description );
    }
}

アイデアは、単一のマーカーを作成し、情報ウィンドウに重要な場所に関する複数の情報を伝達させて、次のようなものにすることです。

ここに画像の説明を入力してください

この実際のコードは実行していませんが、毎日実行されるコードに基づいています。これは、アプローチをかなり詳細に説明し、コードの本体を共有することを目的としています。これにより、少し調整とデバッグが必要になる可能性があることを理解した上で、使用可能なソリューションにかなり近づくことができます。

于 2012-07-10T03:50:25.773 に答える