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

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

// Create marker clusterer

// map: google.maps.Map Object

// markerArray: [google.maps.Marker Object1, google.maps.Marker Object2 ...]

var clusterer = new MarkerClusterer(map, markerArray, {

    maxZoom: 15,

    gridSize: 40

});

// Separate the map pin from the cluster

// specialMarker: google.maps.Marker Object

clusterer.removeMarker(specialMarker);

specialMarker.setMap(map);

思路很简单，就是用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上以假乱真。如下：

var maxZoom = 15;

var markerClusterer = new MarkerClusterer(map, markerArray, {

    maxZoom: maxZoom,

    gridSize: 40

});

// separate the map pin from the cluster

if (specialMarker) {

    markerClusterer.removeMarker(this.centerMarker);

    //specialMarker.setMap(this.map);

    // Make the map pins over the clusters

    if ($(map.getDiv()).find('.special-marker').length < 1) {

        // Create the OverlayView structor

        var overlay = function (marker) {

            this.pos = marker ? marker.getPosition() : new google.maps.LatLng();

            this.marker = marker;

        };

        var markerOverlay;

        // Extend google.maps.OverlayView Class

        // You must add onAdd, onRemove, Draw function to its prototype

        overlay.prototype = new google.maps.OverlayView();

        overlay.prototype.onAdd = function () {

            var pane = this.getPanes().floatPane;

            var marker = this.marker;

            // Add fake marker and attach click event to it

            $('<div class="special-marker"></div>').appendTo($(pane)).on('click', function () {

                google.maps.event.trigger(marker, 'click');

            });

        };

        overlay.prototype.onRemove = function () {

            // You can leave this function empty

            // It's only triggered when you call markerOverlay.setMap(null)

        };

        overlay.prototype.draw = function () {

            // Calculate the position of the marker and put it on the map

            // Hide the fake one when the true marker shows

            var projection = this.getProjection();

            var position = projection.fromLatLngToDivPixel(this.pos);

            var $pane = $(this.getPanes().floatPane);

            $('.special-marker', $pane).css({

                left: position.x - 11,

                top: position.y - 41,

                position: "absolute"

            }).toggle(map.getZoom() <= maxZoom);

        };

        markerOverlay = new overlay(specialMarker);

        markerOverlay.setMap(map);

    }

}

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

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