［Google Maps API 3］Marker从Clusterer中分离及Marker置于Cluster上一层的解决方法

［Google Maps API 3］Marker从Clusterer中分离及Marker置于Cluster上一层的解决办法

在Google Maps API的使用中，经常用到Clusterer来避免过密的Marker显示。但仔细看一下Clusterer的设置参数中并没有直接将某些Marker除外的方法，那遇到这样的需求，怎么做呢？以下是我从*上获得的解答，也是实践下来最佳的方法：

思路很简单，就是用Clusterer对象提供的方法将Marker从中移除，然后用Marker对象的setMap方法使其回到map上。

然后你就会发现另外有一个问题出现了。这个被分离出来的Marker总是在Clusterer的下面一层。客户很不爽。看到有人说要靠建立自定义的OverlayView来把Marker画在Clusterer的上面一层，不过也没看到有具体的解决办法，于是我硬着头皮上了。对谷歌文档半熟的人来说，看到他们列出来的一堆东西很头疼，往往不知道怎么下手。

首先要知道Google Map上总共分了7个层，具体可以参考API文档OverlayView及Panes的部分，说明还是很详细的。

我们可以知道直接用Marker对象画出来的Map pin是在OverlayLayer这一层内，好像是第3层，而Cluster位于其上的OverlayImage这一层内。各层HTML按序从上到下排列，CSS是用position:absolute定位，zIndex定先后层级。

那么从这可以看出，其实如果只要显示Marker在Clusterer上方通过改变zIndex是很容易做到的。问题是，这么做因为原来的层级被搞乱导致一些事件，比如Clusterer的点击事件不能触发。

然后我用了个假的Marker画在比较高层的Pane上以假乱真。如下：

这里我先创建了一个自定义层，插入到第7层Pane的floatPane内最后。然后我用了个跟真Marker一模一样的图标作为这个层的背景，尺寸22px*41px，根据真Marker的位置计算出来在Map上的位置，用CSS绝对定位到指定位置。并且，很重要的是，把真Marker上的click事件绑定到这个假Marker上，因为点击Marker会显示InfoWindow。最后，为了避免真假Marker同时显示在Map上，加了一层判断。

实际上，以假乱真可以说是多余的，你可以直接画自己的Marker，作为真Marker来用，当然这也有一定的风险。