谷歌地圖：渲染markermarkclusterer上面的標記

Question

我有一組標記在我的地圖上聚集。 另一組標記單獨顯示，我碰巧需要在簇上方顯示這些標記。 我曾嘗試在簇選項對象中設置zIndex，低於第二組標記，但無濟於事。 任何想法如何去做這件事？

Answer 1

據我所知，這是不能做到的。羣集位於比標記圖像更高的窗格中。

https://developers.google.com/maps/documentation/javascript/reference#MapPanes

Answer 2

這是可以做到的，但直到你到達那裏這是一個非常顛簸的路......作爲裏克說，問題是，MarkerClusterer增加了自己的OverlayView的使用提出了更高的面板作爲其集羣圖標常規的標記。在羣集上添加標記的唯一方法是用自己的武器擊敗羣集器並添加自己的OverlayView，並將標記圖標標記添加到更高的窗格（閱讀關於窗格here）。我不太喜歡它 - 但這是我找到的唯一方式。

要做到這一點，你必須創建實現google.maps.OverlayView（reference）自定義背景畫面，一個很好的例子可以發現here（有解釋，我用了一些代碼，從它）。

這是一個粗略的CustomOverlay原型：

// build custom overlay class which implements google.maps.OverlayView 
function CustomOverlay(map, latlon, icon, title) { 
    this.latlon_ = latlon; 
    this.icon_ = icon; 
    this.title_ = title; 
    this.markerLayer = jQuery('<div />').addClass('overlay'); 
    this.setMap(map); 
}; 
CustomOverlay.prototype = new google.maps.OverlayView; 
CustomOverlay.prototype.onAdd = function() { 
    var $pane = jQuery(this.getPanes().floatPane); // Pane 6, one higher than the marker clusterer 
    $pane.append(this.markerLayer); 
}; 
CustomOverlay.prototype.onRemove = function(){ 
    this.markerLayer.remove(); 
}; 
CustomOverlay.prototype.draw = function() { 
    var projection = this.getProjection(); 
    var fragment = document.createDocumentFragment(); 

    this.markerLayer.empty(); // Empty any previous rendered markers 

    var location = projection.fromLatLngToDivPixel(this.latlon_); 
    var $point = jQuery('<div class="map-point" title="'+this.title_+'" style="' 
          +'width:32px; height:32px; ' 
          +'left:'+location.x+'px; top:'+location.y+'px; ' 
          +'position:absolute; cursor:pointer; ' 
         +'">' 
         +'<img src="'+this.icon_+'" style="position: absolute; top: -16px; left: -16px" />' 
        +'</div>'); 

    fragment.appendChild($point.get(0)); 
    this.markerLayer.append(fragment); 
}; 

此疊加得到地圖，經緯度對象和圖標的網址。好處是您可以將自己的HTML編寫到圖層中，壞處是您必須自己處理Maps API爲您所做的所有工作（如標記圖像錨定處理）。該示例僅適用於32x32像素的圖像，其中錨點位於圖像中間，因此它仍然非常粗糙。

要使用CustomOverlay，只是實例化這樣的：

// your map center/marker LatLng 
var myLatlng = new google.maps.LatLng(24.247471, 89.920990); 

// instantiate map 
var map = new google.maps.Map(
    document.getElementById("map-canvas"), 
    {zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP} 
); 

// create the clusterer, but of course with markers 
//var markerClusterer = new MarkerClusterer(map, []); 

// add custom overlay to map 
var customCustomOverlay = new CustomOverlay(map, myLatlng, 'http://www.foo.bar/icon.png'); 

我希望這對你的作品。

Answer 3

我有同樣的問題，但不想處理新的覆蓋。

無需創建特定的疊加層，只需切換疊加層的父容器z-索引即可。

這可以通過使用下面的函數來實現：

_changeOverlayOrder = function(map) { 
    var panes = map.getPanes(); 
    var markerOverlayDiv = panes.overlayImage.parentNode; 
    var clusterOverlayDiv = panes.overlayMouseTarget.parentNode; 
    // Make the clusters clickable. 
    if(!markerOverlayDiv.style.pointerEvents) { 
     markerOverlayDiv.style.cssText += ";pointer-events: none;"; 
    } 
    // Switch z-indexes 
    if(markerOverlayDiv.style.zIndex < clusterOverlayDiv.style.zIndex) { 
     var tmp = markerOverlayDiv.style.zIndex; 
     markerOverlayDiv.style.zIndex = clusterOverlayDiv.style.zIndex; 
     clusterOverlayDiv.style.zIndex = tmp; 
    } 
}; 

希望它能幫助。