Google マップの建物の航空写真にフロア プラン オーバーレイを適用する作業を行っています。これを行うには、この例に従いましたが、z-index の設定に関係なく、オーバーレイがマップ ペインの後ろに隠れています。
OverlayView()
onAdd 関数が定義されている関数を使用しています
overlayFloorPlan.prototype.onAdd = function(){
// Create the DIV and set some basic attributes.
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
div.style.zIndex = '100000'; //this number makes no difference
// Create an IMG element and attach it to the DIV.
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
img.style.position = 'absolute';
img.style.opacity = "0.7";
//img.style.zIndex = "100000";
div.appendChild(img);
// Set the overlay's div_ property to this DIV
this.div_ = div;
// We add an overlay to a map via one of the map's panes.
// We'll add this overlay to the overlayImage pane.
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
奇妙なのは、ページの読み込み中にオーバーレイ画像が一瞬表示され、その後消えてしまうことです。
さらに奇妙なことに、この正確なコードは、職場の開発マシンでは正常にレンダリングされますが、自宅のローカル マシンではレンダリングされません。リモートインして、オーバーレイを期待どおりに表示できます。どちらのマシンも同じ最新バージョンの Ubuntu を実行しており、カーネル バージョンのみが異なります。
どんな助けでも大歓迎です。