マップ上でまったく同じ問題が頻繁に発生し、同じ複数のマーカーの問題について心配していることに気付きました。どのマーカーが一番上にあるのでしょうか? ユーザーはそれらすべてをどのように見るのでしょうか? 等
最終的に、問題は実際にはマーカーに関するものではないと判断しました。マップ上の特定のポイントについてです。ユーザーの観点から見ると、マーカーやマーカー周辺のメカニズムはあまり気にしません。彼らが本当に気にかけているのは、その場所に関連付けられた情報だけです。その観点から、課題は、関連する情報を簡単な方法で表示する方法をユーザーに提供する方法を見つけることです。そこで、同じ場所を占めるすべてのマーカーを、ユーザーにとって重要なすべての情報を含む 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 が重要な場所に関する複数の情報を伝達できるようにすることであり、最終的には次のようになります。
この実際のコードはまだ実行していませんが、毎日実行されるコードに基づいています。これは、少し調整とデバッグが必要になる可能性があることを理解したうえで、アプローチをかなり詳細に見て、使用可能なソリューションにかなり近づけるコード本体を共有することを目的としています。