获取重叠Marker信息

最新推荐文章于 2022-12-27 12:45:37 发布

原创最新推荐文章于 2022-12-27 12:45:37 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#google #function #api #百度

JavaScript 专栏收录该内容

70 篇文章

订阅专栏

最近使用google map v2 api进行开发，遇到一个问题：当在地图上创建多个Marker时，可能会出现：在一定的缩放比例下，许多Marker重叠到一起的情况。我想实现当鼠标放到该区域的时候，显示多个Marker的信息。

在Google，百度上搜索了半天，终于找到了解决方法：

大体的思路是：

注册mouseover 事件，获取到鼠标的坐标（经纬度），然后遍历地图上所有的Marker，最核心的是判断鼠标的坐标是否包含在Marker图标坐标的范围内。使用的方法是：

function markerIconContainsLatLng(myMarker, myLatLng){
var mapProjection=map.getCurrentMapType().getProjection(),mapZoomLevel=map.getZoom(), iconSize, iconAnchorPoint,iconAnchorPointOffset, iconBoundsPointSw,iconBoundsPointNe,
iconBoundsLatLngSw, iconBoundsLatLngNe;
iconSize=myMarker.getIcon().iconSize;
iconAnchorPoint=mapProjection.fromLatLngToPixel(myMarker.getLatLng(),
mapZoomLevel);
iconAnchorPointOffset=myMarker.getIcon().iconAnchor;
iconBoundsPointSw=new GPoint(iconAnchorPoint.x-
iconAnchorPointOffset.x, iconAnchorPoint.y-iconAnchorPointOffset.y
+iconSize.height);
iconBoundsPointNe=new GPoint(iconAnchorPoint.x-iconAnchorPointOffset.x
+iconSize.width, iconAnchorPoint.y-iconAnchorPointOffset.y);
iconBoundsLatLngSw=mapProjection.fromPixelToLatLng(iconBoundsPointSw,
mapZoomLevel);
iconBoundsLatLngNe=mapProjection.fromPixelToLatLng(iconBoundsPointNe,
mapZoomLevel);
iconBounds=new GLatLngBounds(iconBoundsLatLngSw, iconBoundsLatLngNe);
if (iconBounds.containsLatLng(myLatLng)) {
return true;