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

Question

我正試圖在谷歌地圖api v3中獲得一個疊加層，以顯示在所有標記之上。 但似乎google api總是將我的疊加層設置為最低的z-index優先級。 我發現只有解決方案是遍歷DOM樹並手動將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

Answer 1

您無法更改OverlayView的zIndex（它沒有此類屬性），但它包含包含DOM節點的窗格。 這就是你可以使用z-index屬性的地方;

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

Answer 2

如果有人遇到和我一樣的問題，這是我的問題和解決方案：

我需要一個OverlayView，它可以為標記添加工具提示，但我的彈出覆蓋圖仍然顯示在標記后面 。

我根據Google文檔實現了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（Level 3）
• MapPanes.floatPane（等級4）

我希望疊加層懸停在地圖上的所有其他信息上，因此我使用了floatPane窗格並解決了問題。

所以，而不是：

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

你用這個：

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

Answer 3

為了能夠使用mapLabel類的paneType，我將一個paneType屬性從google實用程序庫添加到MapLabel類（ https://code.google.com/p/google-maps-utility-library- v3 / source / browse / trunk / maplabel / src / maplabel.js？r = 303 ）。

這有助於使標簽不被折線隱藏。

請查找mapLabel.js文件的代碼添加內容。

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

使用paneType的示例代碼：

    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',
    });

謝謝！

Answer 4

使用panes.overlayMouseTarget.appendChild

如果您想通過鼠標點擊（並使用“click”或CSS pseudo :: hover等事件）來允許您的圖層可以定位，那么您應該使用overlayMouseTarget將疊加層添加到地圖中

var panes = this.getPanes（）;

panes.overlayMouseTarget.appendChild（this.div_）;

另請參閱： https ： //developers.google.com/maps/documentation/javascript/reference？csw = 1＃MapPanes

Answer 5

對於overLay圖層，將z-index設置為104似乎是“神奇的”數字“如果你關心與標記交互（即拖動標記）。任何高於104並且你不能與標記交互。想知道是否有一個不太脆弱的解決方案......

Answer 6

免責聲明：這是一個狡猾的解決方案，可能會在任何時候停止工作，你絕對不應該在生產中使用它。

對於那些尋找快速而骯臟的解決方案的人來說，這個CSS對我有用：

.gm-style > div:first-child > div:first-child > div:nth-child(4) {
  z-index: 99 !important;
}

使用風險自負！