Google Maps: Hiển thị điểm đánh dấu phía trên markerclusterer

Question

Tôi có một tập hợp các điểm đánh dấu được nhóm lại trên bản đồ của tôi. Một bộ điểm đánh dấu khác được hiển thị riêng lẻ và tôi cần phải hiển thị các điểm đánh dấu này trên các cụm. Tôi đã thử đặt zIndex trong đối tượng tùy chọn cụm, thấp hơn giá trị của bộ đánh dấu thứ 2, nhưng không có kết quả. Bất kỳ ý tưởng nào về việc này?

Answer 1

Theo tôi biết điều này không thể thực hiện được. Các cụm nằm trong khung cao hơn so với hình ảnh đánh dấu.

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

Answer 2

Nó có thể được thực hiện, nhưng đó là một cách khá gập ghềnh cho đến khi bạn đạt được điều đó ... Như Rick nói, vấn đề là các MarkerClusterer thêm một OverlayView riêng với các biểu tượng cụm của nó trên một cửa sổ cao như các điểm đánh dấu thông thường. Cách duy nhất để thêm một điểm đánh dấu trên các cụm là để đánh bại các clusterer với vũ khí của riêng mình và thêm một OverlayView của riêng và thêm đánh dấu biểu tượng đánh dấu vào một khung cao hơn (đọc về panes here). Tôi không thực sự thích nó - nhưng đó là cách duy nhất tôi tìm thấy.

Để thực hiện điều này, bạn phải tạo một lớp phủ tùy chỉnh thực hiện google.maps.OverlayView (reference), một ví dụ điển hình có thể được tìm thấy here (với lời giải thích, tôi đã sử dụng một chút mã từ nó).

Đây là một nguyên mẫu CustomOverlay thô:

// 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); 
}; 

lớp phủ này được bản đồ, một đối tượng LatLng và URL của một biểu tượng. Điều tốt là bạn có thể viết HTML của riêng bạn cho lớp, điều xấu là bạn phải xử lý tất cả những thứ mà API Maps làm cho bạn (như xử lý neo hình ảnh đánh dấu) của chính bạn. Ví dụ này chỉ hoạt động tốt với hình ảnh 32x32px, nơi neo nằm ở giữa hình ảnh, vì vậy nó vẫn khá thô.

Để sử dụng CustomOverlay, chỉ cần khởi tạo nó như thế này:

// 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'); 

Tôi hy vọng làm việc này cho bạn.

Answer 3

Tôi gặp vấn đề tương tự nhưng không muốn xử lý lớp phủ mới.

Không cần phải tạo Lớp phủ cụ thể, bạn chỉ có thể chuyển đổi chỉ mục z của vùng chứa phụ huynh.

này có thể đạt được bằng cách sử dụng các chức năng sau:

_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; 
    } 
}; 

Hy vọng nó giúp.