答案:https ://stackoverflow.com/a/10674273/1314132与我认为的您正在寻找的内容很接近。它涵盖:
- 对标记进行排序并识别占据相同位置的标记。
- 将同一位置的标记合并为一个标记。
- 创建一个
InfoWindow
在表格中为共享相同位置的标记显示单独数据的单个。
我相信您只需要更改在同一位置识别标记的逻辑,以识别一组靠近的特定标记,然后修改InfoWindow
内容以显示您的照片,而不是当前示例中显示的数据。进行这两项更改似乎相当简单。
更新原始答案以使用 Google Maps v3 的编辑:
第 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 );
}
}
这个想法是产生一个单一的标记,让 InfoWindow 传达关于位置的多条重要信息,最终得到如下所示的内容:
我没有运行这个实际的代码,但它是基于每天运行的代码。这更旨在让您对该方法有一个相当详细的了解,并分享一段代码,这些代码应该让您非常接近可用的解决方案,但要了解它可能需要一些调整和调试。