Javascript &引用；无法读取属性'；zindex'；“未定义”的定义；谷歌地图

我正在尝试使用API向Google地图添加自定义控件。我已经添加了两个自定义控件，它们工作得很好。我试图复制并粘贴第三个控件的代码（当然要更改相关变量），但我一直得到上面的错误（在标题中）

Chrome控制台和Firebug似乎没有指出一个特定的问题（它在GoogleMapsAPI代码中被破坏）。通过逐行注释，我将其缩小到以下特定行：

map.controls[google.maps.ControlPosition.TOP_RIGHT].push(churchControlDiv);

添加控件的完整代码如下所示：

function ChurchControl(churchControlDiv, map) {
churchControlDiv.style.padding = '5px 0px';
var churchControlUI = document.createElement('DIV');
churchControlUI.style.backgroundColor = 'white';
churchControlUI.style.borderStyle = 'solid';
churchControlUI.style.borderWidth = '1px';
churchControlUI.style.borderColor = 'gray';
churchControlUI.style.boxShadow = 'rgba(0, 0, 0, 0.398438) 0px 2px 4px';
churchControlUI.style.cursor = 'pointer';
churchControlUI.style.textAlign = 'center';
churchControlUI.title = 'Click to see Churches';
churchControlDiv.appendChild(churchControlUI);
var churchControlText = document.createElement('DIV');
churchControlText.style.fontFamily = 'Arial,sans-serif';
churchControlText.style.fontSize = '13px';
churchControlText.style.padding = '1px 6px';
churchControlText.style.fontWeight = 'bold';
churchControlText.innerHTML = 'Churches<br>แสดงจำนวนคริสเตียน';
churchControlUI.appendChild(churchControlText);

google.maps.event.addDomListener(churchControlUI, 'click', function() {
    toggle(churches);
    if (churchControlText.style.fontWeight == 'bold') {
        churchControlText.style.fontWeight = 'normal';
    } else {
        churchControlText.style.fontWeight = 'bold';
    }
});

google.maps.event.addDomListener(churchControlUI, 'mouseover', function() {
    churchControlUI.style.backgroundColor = '#e8e8e8';
});

google.maps.event.addDomListener(churchControlUI, 'mouseout', function() {
    churchControlUI.style.backgroundColor = 'white';
});
}

function initialize(){
    map = new google.maps.Map(document.getElementById("map_canvas"), {
    center: centerLatLng,
    zoom: 7,
    streetViewControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var churchControlDiv = document.createElement('DIV');
    var churchControlDiv = new ChurchControl(churchControlDiv, map);
    churchControlDiv.index = 3;
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(churchControlDiv);
}

功能ChurchControl（churchControlDiv，地图）{
churchControlDiv.style.padding='5px 0px'；
var churchControlUI=document.createElement（'DIV'）；
churchControlUI.style.backgroundColor='white'；
churchControlUI.style.borderStyle='solid'；
churchControlUI.style.borderWidth='1px'；
churchControlUI.style.borderColor='gray'；
churchControlUI.style.boxShadow='rgba（0,0,0,0.398438）0px 2px 4px'；
churchControlUI.style.cursor='pointer'；
churchControlUI.style.textAlign='center'；
churchControlUI.title='单击以查看教堂'；
churchControlDiv.appendChild（churchControlUI）；
var churchControlText=document.createElement（'DIV'）；
churchControlText.style.fontFamily='Arial，无衬线'；
churchControlText.style.fontSize='13px'；
churchControlText.style.padding='1px 6px'；
churchControlText.style.fontWeight='bold'；
churchControlText.innerHTML='Churchks
แสดงจำนวนคริสเตียน';
churchControlUI.appendChild（churchControlText）；
google.maps.event.addDomListener（churchControlUI，'click'，function（）{
切换（教堂）；
如果（churchControlText.style.fontWeight=='bold'）{
churchControlText.style.fontWeight='normal'；
}否则{
churchControlText.style.fontWeight='bold'；
}
});
google.maps.event.addDomListener（churchControlUI，'mouseover'，function（）{
churchControlUI.style.backgroundColor='#e8e8e8'；
});
google.maps.event.addDomainListener（churchControlUI，'mouseout'，function（））{
churchControlUI.style.backgroundColor='white'；
});
}
函数初始化（）{
map=new google.maps.map（document.getElementById（“map_canvas”）{
中心：中心板条，
缩放：7，
街景控制：错误，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var churchControlDiv=document.createElement（'DIV'）；
var churchControlDiv=新的churchControlDiv（churchControlDiv，映射）；
churchControlDiv.index=3；
map.controls[google.maps.ControlPosition.TOP\u RIGHT].push（churchControlDiv）；
}

有什么想法吗？为什么有3个控件会有问题？

我遵循了这一点，这与您的代码非常接近

靠近终点的这条线需要改变

var churchControlDiv = new ChurchControl(churchControlDiv, map);

将

churchControlDiv

替换为

churchControl

或其他名称，因为不应覆盖churchControlDiv

看这里

---

我用

//CHANGED

标记了我的更改，并发出了单击警报，“新建地图中心”

由于不同的原因，在我的控制台上弹出了相同的错误

我没有使用默认的javascript DOM操作，而是使用jQuery来创建我的元素，例如

    var controlDiv = $('<div></div>');
    var controlUI = $('<div class="alert alert-info"></div>');
    controlDiv.append(controlUI);
    var controlText = $('<div>Control text here</div>');
    controlUI.append(controlText);

另请参见：

---

此问题的一般根本原因似乎是元素或其属性被删除或不存在。Maps API正在尝试在

style

属性中查找

zIndex

我在与Maps API控件交互的Vue应用程序自定义组件中遇到了此问题。我们在拆卸部件时更加小心，从而解决了这个问题

---

基本上，您需要确保不向控件中添加null元素，并且在删除该元素或其属性之前不使其为null，方法是使用v-if之类的时髦工具。

就是这样。谢谢当我检查并更改变量时，我必须将其更改为错误的变量。我看了很久。。。

    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv[0]);