3

複数のマーカーで満たされた Google マップを含む Web サイトがあります。各マーカーは、フェスティバルのイベントを表します。情報が大きすぎて情報ウィンドウに収まらないため、カスタム オーバーレイを使用することにしました。これまでのところ、部分的に成功しています。以下は私のイメージです。ご覧のとおり、オーバーレイはマーカーの下にあります。私の目標は、オーバーレイがマーカーと UI の上に来るようにすることです。

ここに画像の説明を入力

以下は私のコードサンプルです。

TxtOverlay.prototype.draw = function() {
    // create info window
    var div = document.createElement("div");
    div.id = "mapOverlay";
    div.innerHTML = this.txt;
    div.style.cssText = 'background-color : #000; color: #FFF; border-radius: 15px; border-style : solid; border-width : 1px;padding: 10px; z-index: 9999; display: block; width: 460px; height: 460px; opacity: 0.4;';

    // get projection
    var map = this.map;
    var overlayProjection = this.getProjection(); 
    var anchor = overlayProjection.fromLatLngToDivPixel(this.pos);
    div.style.position = "absolute";
    div.style.left = (anchor.x - 240) + 'px';
    div.style.top = (anchor.y - 240)+ 'px';

    // bind created div to object var
    this.div = div;
    // add to map
    var panes = this.getPanes();
    panes.overlayLayer.appendChild(div);

    console.log("prototype draw");
}

z-index を 9999 まで使用しました (4000 個のマーカー atm があります) が、機能しません。各マーカー ID には独自の z-index があることに注意してください。(fe マーカー id = 1 は z-index = 1、マーカー id = 2 は z-index = 2、マーカー id = 3 は z-index = 3、ect )

オーバーレイがマーカーと UI の両方の上にある場合は、地図と地図オブジェクトを操作する代わりに、クリック イベントをキャッチしてオーバーレイを削除する方が簡単です。

ありがとうございました。

4

1 に答える 1

3

この問題の解決にも関心がある他の人のために、簡単な回避策を見つけました。マーカーの上にある floatPane レイヤーを使用しています。次に、UI/コントロールを削除して、マップの操作なしでオーバーレイを機能させました。

描画方法では、

// add to map
var panes = this.getPanes();
panes.floatPane.appendChild(div);

// add event
document.getElementById("mapOverlay").addEventListener('click', this.onRemove, false);

// disable map controls
toggleControls(false);

次に、divがクリックされたら、単に次を作成します

// remove overlay
TxtOverlay.prototype.onRemove = function(e) {
    // remove listener
    var element = document.getElementById("mapOverlay");
    element.removeEventListener('click', this.onRemove, false);
    // and div
    var parent = element.parentNode;
    parent.removeChild(element);
    this._div = null;

    // return controls
    toggleControls(true);
}

そしてトグルメソッド、

// toggles control ; false = no interaction, true = interaction
var toggleControls = function(bool) {
    _map.setOptions({draggable: bool, zoomControl: bool, scrollwheel: bool, disableDoubleClickZoom: !bool, scaleControl : bool, zoomControl : bool, panControl : bool});
}

オーバーレイの配置と削除はこれですべてです。:-)

ここに画像の説明を入力

于 2013-08-14T11:57:26.303 に答える