Google maps 同一坐标中多个标记的解决方案,谷歌地图mashup
我正在制作一个mashup,其中缩略图将显示在谷歌地图上 问题是许多缩略图将共享同一坐标。所以,如果我像标记一样绘制它们,它们将一个接一个Google maps 同一坐标中多个标记的解决方案,谷歌地图mashup,google-maps,maps,visualization,Google Maps,Maps,Visualization,我正在制作一个mashup,其中缩略图将显示在谷歌地图上 问题是许多缩略图将共享同一坐标。所以,如果我像标记一样绘制它们,它们将一个接一个 你有没有看到这个问题的创造性解决方案?谢谢您需要查找术语群集。基本上只显示一个标记,指示该位置实际上有多个标记。然后在适当的缩放级别,标记开始单独显示 如果它们处于完全相同的坐标并且永远不会发散,那么您将需要实现当您将鼠标悬停在聚集标记上时屏幕上弹出的内容(就像一个浮动DIV,其中包含供用户选择/查看的缩略图列表,甚至还有一个上下文菜单,用户可以在其中右键单
你有没有看到这个问题的创造性解决方案?谢谢您需要查找术语群集。基本上只显示一个标记,指示该位置实际上有多个标记。然后在适当的缩放级别,标记开始单独显示
如果它们处于完全相同的坐标并且永远不会发散,那么您将需要实现当您将鼠标悬停在聚集标记上时屏幕上弹出的内容(就像一个浮动DIV,其中包含供用户选择/查看的缩略图列表,甚至还有一个上下文菜单,用户可以在其中右键单击集群并选择单个项目)有一些Javascript库可以实现集群,并且很容易集成到现有的mashup中:
- -我将此应用于mashup,发现它很容易集成,有一组漂亮的默认图标
- -我没用过这个,但它似乎很实用
您还可以阅读这篇文章,其中介绍了各种备选方案。聚类当然很有用,但它没有解决最初的问题,即如果标记共享相同的精确坐标,如何显示标记。Google Maps API v3根本不这样做。它只显示其中一个 @RedBlueThing建议的集群解决方案不能解决这个问题 有几个选项。其中一个是@Bryan建议的,手动进行一些预处理,并将描述性信息放在最后一个标记的信息窗口中
或者——我更喜欢——将标记预处理到非常轻微的程度(10米左右)更改共享同一精确位置的标记的坐标。如果您有能力放弃这种精度级别,请参见此处。我进一步修改了代码-参见此处。使用群集。将标记组作为群集。一个群集将在内部显示多个标记。我有一个优雅而漂亮的解决方案:
@Override
public boolean onClusterClick(Cluster<ProfileCardDTO> cluster)
{
if (inProcessOfClick.size() > 0)
{
changeRenderMarkerType(doctorMarkerRenderer.getMarkerType());
for (Polyline line : polylines)
{
line.remove();
}
polylines.clear();
}
boolean same = true;
ProfileCardDTO tmpProfile = null;
for (ProfileCardDTO profile : cluster.getItems())
{
if (tmpProfile != null)
{
if ((Math.abs(Float.parseFloat(tmpProfile.getPractice().getLatitude()) - Float
.parseFloat(profile
.getPractice()
.getLatitude())) > 0.00001f) || (Math.abs(Float.parseFloat(tmpProfile
.getPractice().getLongitude()) - Float.parseFloat(profile
.getPractice()
.getLongitude())) > 0.00001f))
{
same = false;
break;
}
}
tmpProfile = profile;
}
if (zoomLevel >= 12 && same)
{
inProcessOfClick.clear();
int count = cluster.getSize();
double a = 360.0 / count;
double radius = 0.0006;
if (zoomLevel < 17.7)
{
radius = 0.0005;
} else if (zoomLevel < 18.7)
{
radius = 0.0003;
} else if (zoomLevel < 19.7)
{
radius = 0.00015;
} else if (zoomLevel <= 20.7)
{
radius = 0.00007;
} else if (zoomLevel > 20.7)
{
radius = 0.00005;
}
int i = 0;
final long duration = 500;
final long start = SystemClock.uptimeMillis();
final Interpolator interpolator = new LinearInterpolator();
for (ProfileCardDTO profile : cluster.getItems())
{
MarkerOptions mrk = new MarkerOptions();
double x = radius * Math.cos((a * i) / 180 * Math.PI);
double y = radius * Math.sin((a * i) / 180 * Math.PI);
LatLng latLngEnd = new LatLng(profile.getPosition().latitude + x, profile
.getPosition().longitude + y);
LatLng latLngStart = profile.getPosition();
mrk.position(latLngStart);
doctorMarkerRenderer.onBeforeClusterItemRendered(profile, mrk);
Marker tmpMrk = clusterManager.getMarkerCollection().addMarker(mrk);
Handler handler = new Handler();
handler.post(new Runnable()
{
@Override
public void run()
{
long elapsed = SystemClock.uptimeMillis() - start;
if (elapsed > duration)
elapsed = duration;
float t = interpolator.getInterpolation((float) elapsed / duration);
double lng = t * latLngEnd.longitude + (1 - t) * latLngStart.longitude;
double lat = t * latLngEnd.latitude + (1 - t) * latLngStart.latitude;
tmpMrk.setPosition(new LatLng(lat, lng));
if (t < 1.0)
{
handler.postDelayed(this, 10);
} else
{
PolylineOptions line =
new PolylineOptions().add(cluster.getPosition(),
cluster.getPosition(),
latLngEnd,
latLngEnd)
.width(5).color(Color.BLACK);
polylines.add(getGoogleMap().addPolyline(line));
}
}
});
doctorMarkerRenderer.getmMarkerCache().put(profile, tmpMrk);
clusterManager.addItem(profile);
inProcessOfClick.add(profile);
i++;
}
tmpCluster = cluster;
bringMarkerToTop(selectedDoctorMiniProfile);
new Handler().postDelayed(() ->
{
if (doctorMarkerRenderer.getMarker(cluster) != null)
doctorMarkerRenderer.getMarker(cluster).setAlpha(0.5f);
}, 250);
} else
{
LatLngBounds.Builder builder = new LatLngBounds.Builder();
for (ProfileCardDTO profile : cluster.getItems())
{
Practice2 location = profile.getLocation();
LatLng latLng = new LatLng(Double.parseDouble(location.getLatitude()), Double.parseDouble(location
.getLongitude()));
builder.include(latLng);
}
LatLngBounds latLngBounds = builder.build();
CameraUpdate cameraUpdate = CameraUpdateFactory.newLatLngBounds(latLngBounds, getResources().getDimensionPixelSize(R.dimen.map_padding));
getGoogleMap().animateCamera(cameraUpdate, ANIMATE_DURATION_MS, new GoogleMap.CancelableCallback()
{
@Override
public void onFinish()
{
changeRenderMarkerType(doctorMarkerRenderer.getMarkerType());
}
@Override
public void onCancel()
{
}
});
}
return true;
}
@覆盖
公共布尔onClusterClick(集群)
{
if(inProcessOfClick.size()>0)
{
changeRenderMarkerType(doctorMarkerEnder.getMarkerType());
用于(多段线线:多段线)
{
行。删除();
}
polylines.clear();
}
布尔值相同=真;
ProfileCardDTO tmpProfile=null;
for(ProfileCardDTO profile:cluster.getItems())
{
if(tmpProfile!=null)
{
if((Math.abs(Float.parseFloat(tmpProfile.getPractice().getLatitude())-Float
.parseFloat(个人资料)
.getPractice()
.getLatitude())>0.00001f)| |(Math.abs(Float.parseFloat(tmpProfile
.getPractice().getLongitude())-Float.parseFloat(概要文件
.getPractice()
.getLongitude())>0.00001f)
{
相同=错误;
打破
}
}
tmpProfile=配置文件;
}
如果(zoomLevel>=12&&same)
{
inProcessOfClick.clear();
int count=cluster.getSize();
双a=360.0/计数;
双半径=0.0006;
如果(缩放级别<17.7)
{
半径=0.0005;
}否则如果(zoomLevel<18.7)
{
半径=0.0003;
}否则如果(zoomLevel<19.7)
{
半径=0.00015;
}否则如果(zoomLevel 20.7)
{
半径=0.00005;
}
int i=0;
最终长持续时间=500;
最终长启动=SystemClock.uptimeMillis();
最终插值器插值器=新的线性插值器();
for(ProfileCardDTO profile:cluster.getItems())
{
MarkerOptions mrk=新的MarkerOptions();
双x=半径*数学cos((a*i)/180*数学PI);
双y=半径*数学sin((a*i)/180*数学PI);
LatLng latLngEnd=新LatLng(profile.getPosition().latitude+x,profile
.getPosition().longitude+y);
LatLng latLngStart=profile.getPosition();
mrk位置(latLngStart);
doctormarkerender.on在呈现集群项目之前(配置文件,mrk);
Marker tmpMrk=clusterManager.getMarkerCollection().addMarker(mrk);
Handler=newhandler();
handler.post(新的Runnable()
{
@凌驾
公开募捐
{
长时间运行=SystemClock.uptimeMillis()-开始;
如果(经过>持续时间)
经过=持续时间;
float t=interpolator.getInterpolation((float)经过时间/持续时间);
双lng=t*纬度经度+(1-t)*纬度起点经度;
双纬度=t*纬度+纬度(1-t)*纬度起始纬度;
tmpMrk.设置位置(新车床(车床,lng));
如果(t<1.0)
{
handler.postDelayed(这是10);
}否则
{
多段线选项线=
新建PolylineOptions().add(cluster.getPosition(),
cluster.getPosition(),
拉特根德,
拉丁语(拉丁语)
.宽度(5).颜色(颜色.黑色);
添加(getGoogleMap().addPolyline(line));
}
}
});
doctormarkerender.getmMarkerCache().put