谷歌地图v2：如何显示具有相同坐标的各种标记 [英] Google Maps v2: how to display various markers with the same coordinates
问题描述
我正在使用Google Maps JavaScript API V2标记保存在阵列中的位置。具有不同坐标的标记显示得很好，但我不知道如何显示具有相同坐标的各种标记。我需要它，因为一组位置可以具有相同的坐标，但是具有不同的描述。显示这些不同描述的方式是什么？
添加标记的代码是：
var map;
函数loadEarth（mapdiv）{
if（GBrowserIsCompatible（））{
if（！mapdiv）
return true;
map = new GMap2（document.getElementById（map））;
map.enableDoubleClickZoom（）;
map.enableScrollWheelZoom（）;
map.addControl（new GMapTypeControl（））;
map.addControl（新的GSmallMapControl（））;
map.setCenter（new GLatLng（40.186718，-8.415994），13）;
函数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）;
}）;
返回标记;
...
for（var i = 0; i< gl_list.length; i ++）{
var point = new GLatLng（gl_list [i] .Latitude，gl_list [i] .Longitude ）;
description =访问地点：+ gl_list [i] .nome +on：+ gl_list [i] .data;
map.addOverlay（createMarker（point，i + 1，description））;
感谢您的关注。
在我的地图上，我经常遇到完全相同的问题，并且发现自己担心同一个多重标记问题：哪个标记位于顶部？用户如何看待它们？等等。
最后，我决定这个问题实际上不是关于标记的;它真的关于地图上特定的点。从用户的角度来看，他们可以不关心标记或标记周围的任何机制。他们真正关心的是与那个位置相关的信息。从这个角度来看，挑战是找到一种方式为用户提供一种直观地查看相关信息的方式。所以我决定将占据相同位置的所有标记合并成一个标记，其中包含对用户来说很重要的所有信息。
步骤一步，这里是我用来解决同一位置问题中的多个标记的方法：
第1步：对标记数据进行排序，以便识别占据相同位置的标记：
<$ （a，b）{
var aLat = a.Latitude，bLat = b.Latitude;
if（aLat！== bLat）pre> gl_list.sort {return aLat - bLat;}
else {return a.Longitude - b.Longitude;}
}）;
步骤2： 新增功能为 gl_list 数组的共同成员创建一个特殊标记：
var specialMarkers = null;
函数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）;
}）;
返回标记;
}
步骤3： 遍历标记数据，识别具有相同位置的分组，使用特殊标记在地图上显示它们，并在其他位置处理所有标记数据：
for（var i = 0; i
var coLocated = null;
var j = 0，matchWasFound = false;
if（i <（gl_list.length - 1））{
do {
var next = assetData [i + ++ j];
if（next！== undefined）{//只是为了安全
if（next.Latitude === current.Latitude&&
next.Longitude === current。经度）{
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;
继续;
}
var point = new GLatLng（gl_list [i] .Latitude，gl_list [i] .Longitude）;
description =访问地点：+ gl_list [i] .nome +
on：+ gl_list [i] .data;
map.addOverlay（createMarker（point，i + 1，description））;
}
}
这个想法是产生一个标记并让InfoWindow传达了关于位置的多个重要信息，最后看起来像这样：
现在我还没有运行这个实际的代码，但它是基于代码的每天运行。这更多的目的是让你对这种方法有一个相当详细的了解，并且共享一段代码，它应该让你相当接近可用的解决方案，并且理解它可能需要一点调整和调试。
I'm using Google Maps JavaScript API V2 to mark locations saved in an array. Markers with different coordinates are displayed well, but I have no idea how to display various markers with the same coordinates. I need it because an array of locations can have the same coordinates, but with a different description. What is the way to display those different descriptions?
The code where markers are added is:
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));
}
Thanks for your attention.
I very often have the exact same problem on my map and found myself worrying about the same multiple markers issues: which marker is on top? how does a user see them all? etc.
Eventually, I decided that the problem wasn't actually about markers; its really about a specific point on the map. From a user perspective, they could care less about the markers or any of the mechanics around the markers. All they really care about is the information associated with that location. From that perspective, the challenge is finding a way to provide the user a way to view the associated information in a straightforward way. So I decided to merge all of the markers that occupy the same location into a single marker that includes all of the information that matters to the user.
Step-by-step, here is the approach I use to solve the multiple markers in the same location problem:
Step 1: Sort the marker data to allow identification of the markers that occupy the same location:
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; }
});
Step 2: Add a new function that creates a "special" marker for colocated members of the gl_list array:
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;
}
Step 3: Iterate over the marker data, identify groupings that have the same location, show them on the map using a special marker, and handle all of the marker data at other locations "normally":
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 ) );
}
}
The idea is to produce a single marker and let the InfoWindow convey the multiple pieces of information about the location that are important, ending up with something that looks like this:
Now I haven't run this actual code, but it is based on code that runs every day. This is more intended to give you a fairly detailed look at the approach and share a body of code that should get you pretty darn close to a usable solution, with the understanding that it may need a little tweaking and debugging.
这篇关于谷歌地图v2：如何显示具有相同坐标的各种标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
