[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来用,当然这也有一定的风险。

posted @ 2014-03-18 23:01  Jennie Ji  阅读(2127)  评论(0编辑  收藏