谷歌地圖版本3中的z-Index覆蓋圖

我試圖在谷歌地圖api v3中顯示覆蓋圖顯示在所有標記之上。但似乎谷歌API總是把我的覆蓋最低的Z指數的優先事項。我唯一找到的解決方案是遍歷DOM樹並手動將z-index設置爲更高的值。解決方案不佳谷歌地圖版本3中的z-Index覆蓋圖

我加入我的一個新的div我用疊加：

onclick : function (e) { 
    var index = $(e.target).index(), 
     lngLatXYposition = $.view.overlay.getProjection().fromLatLngToDivPixel(this.getPosition()); 
     icon = this.getIcon(), 
     x = lngLatXYposition.x - icon.anchor.x, 
     y = lngLatXYposition.y - icon.anchor.y 

    $('<div>test</div>').css({ left: x, position: 'absolute', top: y + 'px', zIndex: 1000 }).appendTo('.overlay'); 
}

我試過，同時創造我覆蓋我能想到的每一個屬性。 zIndex的，zPriority等

我加入我的疊加功能：

$.view.overlay = new GmapOverlay({ map: view.map.gmap });

而且GmapOverlay從新google.maps.OverlayView繼承。

任何想法？

..fredrik

來源

2010-04-21 fredrik

你不能改變一個OverlayView的（它有沒有這樣的屬性）的zIndex的，但它擁有一個包含DOM節點窗格。這就是您可以使用z-index屬性的地方;

... 
lngLatXYposition = $.view.overlay.getPanes().overlayLayer.style['zIndex'] = 1001; 
...

來源

2010-06-17 16:12:28

這是對這個問題的精確答案。我不明白爲什麼它不被接受。 – 2012-01-18 18:12:15

設置的z-index到104的覆蓋層似乎是「神奇」數字」如果你關心與標記交互（即拖動標記），任何高於104，你不能與互動。標記不知道是否有一個不太脆弱的解決方案......

來源

2010-08-09 21:09:47 psorr

神奇號碼。 – 2012-04-10 07:32:49

是否有人有相同的問題，因爲我是，這裏是我的問題和解決方案：

我需要一個OverlayView的這將增加工具提示標誌，但是我的彈出式疊加層始終在後面顯示。標記。

我實現了OverlayView的子類爲每谷歌文檔： https://developers.google.com/maps/documentation/javascript/customoverlays

當你編寫自定義OverlayView.prototype.onAdd功能，你需要指定哪個窗格附上您的覆蓋。我只是複製代碼而沒有真正閱讀周圍的解釋。

在他們的代碼，他們將疊加層附加到overlayLayer窗格：

var panes = this.getPanes(); panes.overlayLayer.appendChild(div);

但也有許多不同的MapPanes你可以使用：

「集合窗格，MapPanes類型在地圖上指定不同圖層的堆疊順序。以下窗格是可能的，並且按從下到上堆疊的順序列舉：「

MapPanes.mapPane（級別0）

MapPanes.overlayLayer（級別1）

MapPanes.markerLayer（級別2）

MapPanes。overlayMouseTarget（3級）

MapPanes.floatPane（4級）

我想覆蓋到地圖上的所有其他信息將鼠標懸停在，所以我用了floatPane窗格，問題就解決了。

因此，而不是：如果你想要讓你的層是通過靶向

this.getPanes().floatPane.appendChild(div);

來源

2013-06-24 08:08:17 Mikepote

我編輯了一個剪切樣本的答案。這實際上應該是正確的答案，而不是z-index黑客。 – 2013-11-15 12:20:48

感謝您的關注，將永遠不會知道關於floatPane。這是做到這一點的正確方法。 – jefffan24 2014-11-03 17:00:26

這真的應該是正確的答案。 – 2016-06-03 05:29:52

使用panes.overlayMouseTarget.appendChild

：

this.getPanes().overlayLayer.appendChild(div)

您使用此鼠標點擊（並使用「click」或CSS pseudo :: hover等事件），則應使用將覆蓋圖添加到地圖

var panes = this.getPanes（）;

panes.overlayMouseTarget.appendChild（this.div_）;

另見： https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapPanes

來源

2014-05-29 17:35:54 Layke

我最初的問題是當我使用panes.overlayLayer.appendChild ...切換到overlayMouseTarget解決它。 – Layke 2014-05-29 17:36:33

爲了能夠玩的mapLabel類的paneType，我添加了一個paneType屬性從谷歌工具庫的MapLabel類（https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/maplabel/src/maplabel.js?r=303）。

這是有用的，使標籤不被折線隱藏。

請在mapLabel.js文件中添加代碼。使用paneType

MapLabel.prototype.onAdd = function() { 
    var canvas = this.canvas_ = document.createElement('canvas'); 
    var style = canvas.style; 
    style.position = 'absolute'; 

    var ctx = canvas.getContext('2d'); 
    ctx.lineJoin = 'round'; 
    ctx.textBaseline = 'top'; 

    this.drawCanvas_(); 

    var panes = this.getPanes(); 
    if (panes) { 
    // OLD: panes.mapPane.appendChild(canvas) 
    var paneType = this.get('paneType'); 
    panes[paneType].appendChild(canvas); 
    } 
}; 

MapLabel = function (opt_options) { 
    this.set('fontFamily', 'sans-serif'); 
    this.set('fontSize', 12); 
    this.set('fontColor', '#000000'); 
    this.set('strokeWeight', 4); 
    this.set('strokeColor', '#ffffff'); 
    this.set('align', 'center'); 

    this.set('zIndex', 1e3); 
    this.set('paneType', 'floatPane'); 

    this.setValues(opt_options); 
}

示例代碼：

var mapLabel = new MapLabel({ 
     text: segDoc.curr_value.toFixed(0), 
     position: new google.maps.LatLng(lblLat, lblLng), 
     map: map.instance, 
     fontSize: 12, 
     align: 'center', 
     zIndex: 10000, 
     paneType: 'floatPane', 
    });

謝謝！

來源

2016-02-25 11:55:29 Gabriel

谷歌地圖版本3中的z-Index覆蓋圖

回答

相關問題