Question

我有谷歌地图和我正在使用一个针对infowindows的hacky解决方案，如果进行了特殊的用户交互，则不会出现在覆盖谷歌地图的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]

但我没有删除元素请求帮助提前谢谢

Answer 1

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

另一种方法：而不是添加/删除控件，只需添加一次控件并切换display的{{1}}。

Answer 2

我发现setAt()和removeAt()方法不适用于地图控件。 Google仅在其代码示例中使用push()和clear()方法。

此外，display属性可能会在隐藏并重新显示之后导致控件彼此重叠。我发现visibility属性效果最好。在具有谷歌地图样式的自定义控件构造函数下方以及显示/隐藏控件的方法。

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

Google地图，从控件数组中删除控件

2 个答案: