Đặt một MapLabel ở trên cùng của Đa giác trong Google Maps V3

Question

Tôi đang cố gắng đặt một MapLabel lên trên một Đa giác trong V3 của Google Maps. Tôi đã cố gắng để thiết lập các MapLabel zIndex đến 2 và Polygon zIndex đến 1 mà không có bất kỳ may mắn. Không phải là điều này có thể vì Polygon không thực sự theo sau zIndex?

Tôi đã tạo một jsFiddle cho các bạn kiểm tra: http://jsfiddle.net/7wLWe/1/

Giải pháp: Trong maplabel.js thay đổi:

mapPane.appendChild(canvas); 

tới:

floatPane.appendChild(canvas); 

Lý do là vì floatPane phía trên tất cả các lớp bản đồ (ô 6)

http://code.google.com/apis/maps/documentation/javascript/reference.html#OverlayView

Answer 1

Thật tuyệt khi thấy bạn đang sử dụng thư viện tiện ích MapLabel!

Như bạn đã phát hiện ra, MapLabel nằm trong một khung bản đồ khác. zIndex chỉ được tôn trọng trong một ngăn nhất định.

Answer 2

Nếu bạn không muốn chạm vào maplabel.js, bạn có thể thêm chức năng này để thay đổi z-index của công ty mẹ của các nhãn (mặc dù nếu bạn có canvas các yếu tố khác, bạn có thể cần phải thay đổi chức năng):

//change the z-index of the canvas elements parents to move them above polygon layer 
google.maps.event.addListenerOnce(map, 'idle', function(){ 
//var canvasElements = document.getElementsByTagName('canvas');//plain js to get the elements 
var canvasElements = jQuery('canvas'); //jquery for easy cross-browser support 
    for(var i=0; i<canvasElements.length; i++){ 
     canvasElements[i].parentNode.style.zIndex = 9999; 
    } 

}); 

Answer 3

Đây có thể là một tìm trễ .. nhưng hy vọng ai đó sẽ thấy điều này hữu ích.

Nếu bạn không muốn sử dụng floatPane (Giải pháp John) vì điều này sẽ luôn luôn trên đầu trang của tất cả mọi thứ, và muốn đưa ra một tùy chỉnh ZIndex .. Chỉnh sửa maplabel.js. Thêm dòng sau ngay trước khi kết thúc MapLabel.prototype.onAdd = function() {

if (canvas.parentNode != null) { 
    canvas.parentNode.style.zIndex = style.zIndex; 
} 

Bây giờ bạn có thể vượt qua zIndex trong khi tạo ra một maplabel :

var mapLabel = new MapLabel({ 
    text: "abc", 
    position: center, 
    map: map, 
    fontSize: 8, 
    align: 'left', 
    zIndex: 15 
}); 

Answer 4

var maplabel = new MapLabel.... 
$(maplabel.getPanes().mapPane).css('z-index', maplabel.zIndex); 

jQuery làm cho nó khá đơn giản đối với tôi mà không thay đổi maplabel.js Tôi cũng tìm thấy giải pháp thay thế

$(maplabel.getPanes().mapPane).addClass('map-pane'); 

và sau đó xác định z-index trong một stylesheet

Answer 5

tôi phác thảo lên CodePen example này sử dụng lớp gmaps-labels. Nó dựa trên fiddle trong Q ở trên và thêm ose của một lớp LabelOverlay. Lớp yêu cầu new google.maps.LatLng, kích thước (trong đơn vị LatLng) của một hộp xoay quanh điểm của nhãn (Nếu nhãn sẽ tràn hộp này, ẩn nó, và một số CSS .Có một đoạn mã, hãy xem bản trình diễn trong CodePen.

var MIN_BOX_H = 0.0346, 
    MIN_BOX_W = 0.121, 
    MAX_BOX_H = 0.001, 
    MAX_BOX_W = 0.03; 



var overlay1 = new LabelOverlay({ 
    ll  : myLatlng, 

    minBoxH  : MIN_BOX_H, 
    minBoxW  : MIN_BOX_W, 

    maxBoxH  : MAX_BOX_H, 
    maxBoxW  : MAX_BOX_W, 

    ... 

    label  : "I want on top", 
    map  : map 
});