4

私は Google マップを持っており、特別なユーザー インタラクションが行われた場合に、Google マップをオーバーレイする div の下に情報ウィンドウが表示されないようにするためのハック ソリューションを使用しています。

ユーザー操作の後にこのコードを実行します:

var controlDiv = document.createElement('div');
controlDiv.style.width = '220px';
controlDiv.style.height = '500px';
map.controls[google.maps.ControlPosition.RIGHT_TOP].push(controlDiv);

それは素晴らしく機能しますが、ユーザーがオーバーレイを閉じると、配列にプッシュした要素を削除したいと思います。

私はそれをつなぎ合わせようとしましたが、それを選択する方法やインデックスが何であるかがわかりません.

map.controls[google.maps.ControlPosition.RIGHT_TOP].splice("?", 1);

他の可能性があるかもしれません

delete map.controls[google.maps.ControlPosition.RIGHT_TOP]

しかし、要素を削除することはできません。よろしくお願いします。

4

2 に答える 2

11

map.controls[google.maps.ControlPosition.RIGHT_TOP] はネイティブ配列ではなく、google.maps.MVCArrayです

この単一のカスタム コントロールのみを配列に追加する場合は、次のように呼び出すだけです。

map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();

さらにカスタム コントロールがある場合は、コントロールを反復処理してインデックスを見つけてcontrolDiv呼び出します。

map.controls[google.maps.ControlPosition.RIGHT_TOP].removeAt(index);

別のアプローチ:コントロールを追加/削除する代わりに、コントロールを一度追加してdisplayofを切り替えますcontrolDiv。

于 2013-11-13T17:13:01.393 に答える
3

setAt()メソッドとremoveAt()メソッドがマップ コントロールに対してうまく機能しないことがわかりました。Google は、コード サンプルでpush()とメソッドのみを使用しています。clear()

また、displayプロパティを非表示にして再表示すると、コントロールが重なって表示される場合があります。visibilityプロパティが最適に機能することがわかりました。Google マップ スタイルを持つカスタム コントロール コンストラクターと、コントロールを表示/非表示にするメソッドの下。

function CustomControl(options) { // constructor
    "use strict";
    this.div = document.createElement('div');
    this.div.style.visibility = "visible";
    var controlUI = document.createElement('div'); // Set CSS for the control border
    controlUI.style.backgroundColor = '#fff';
    controlUI.style.backgroundClip = 'padding-box';
    controlUI.style.border = '1px solid rgba(0, 0, 0, 0.15)';
    controlUI.style.borderRadius = '2px';
    controlUI.style.boxShadow = 'rgba(0,0,0,.3) 0px 1px 4px -1px';
    controlUI.style.cursor = 'pointer';
    controlUI.style.margin = '5px 5px 15px';
    controlUI.style.minWidth = '120px';
    controlUI.style.textAlign = 'left';
    controlUI.style.position = 'relative';
    if (options.title) {
        controlUI.title = options.title;
    }
    if (options.visibility) { // "visible" or "hidden"
        controlUI.style.visibility = options.visibility;
    }
    this.div.appendChild(controlUI);
    var controlText = document.createElement('div'); //Set CSS for the control interior
    controlText.style.color = 'rgb(25,25,25)';
    controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
    controlText.style.fontSize = '11px';
    controlText.style.fontWeight = '500';
    controlText.style.padding = '1px 6px';
    if (options.text) {
        controlText.innerHTML = options.text;
    }
    controlUI.appendChild(controlText);
    if (options.index) {
        this.div.index = options.index;
    }
    if (options.handler) {
        google.maps.event.addDomListener(controlUI, 'click', options.handler);
    }
    if (options.position) {
        this.position = options.position;
    }
    if (options.sequence) {
        this.sequence = options.sequence;
    }
    this.setVisible = function(bolean) { // method
        var visibility;
        if (bolean) { //true
            visibility = "visible";
        } else {
            visibility = "hidden";
        }
        controlUI.style.visibility = visibility;
    }
}
于 2015-09-01T13:53:10.963 に答える