Javascript 未捕获类型错误：无法读取属性'；zIndex'；在离子（AngularJS）中未定义的

谢谢收看这个问题

我正在为我居住的城市做一个离子应用程序。它使用谷歌地图来显示一些与城市相关的信息。此外，我还想在地图上添加自定义控件，以显示不同类型的标记，例如公交车站或医院等服务。问题是我无法解决这个错误：“UncaughtTypeError:无法读取未定义的属性'zIndex'”，我已经尝试了这个问题的大多数其他答案

我正在尝试在我的应用程序的控制器中添加元素（我认为图例就是它的名称），如下所示：

var controlesDiv = document.createElement('DIV');
var controles = new CrearLeyenda(controlesDiv, map);
controlesDiv.index = 4;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controles);

然后，在控制器外部，我有CrearLeyenda函数：

function CrearLeyenda(controlesDiv, map) {
controlesDiv.style.padding = '5px 0px';
var controlesUI = document.createElement('DIV');
controlesUI.style.backgroundColor = 'white';
controlesUI.style.borderStyle = 'solid';
controlesUI.style.borderWidth = '1px';
controlesUI.style.borderColor = 'gray';
controlesUI.style.boxShadow = 'rgba(0, 0, 0, 0.398438) 0px 2px 4px';
controlesUI.style.cursor = 'pointer';
controlesUI.style.textAlign = 'center';
controlesUI.title = 'Click to see Churches';
controlesDiv.appendChild(controlesUI);
var controlesText = document.createElement('DIV');
controlesText.style.fontFamily = 'Arial,sans-serif';
controlesText.style.fontSize = '13px';
controlesText.style.padding = '1px 6px';
controlesText.style.fontWeight = 'bold';
controlesText.innerHTML = 'Controles';
controlesUI.appendChild(controlesText);

google.maps.event.addDomListener(controlesUI, 'click', function () {
    alert("clicked");

    if (controlesText.style.fontWeight == 'bold') {
        controlesText.style.fontWeight = 'normal';
    } else {
        controlesText.style.fontWeight = 'bold';
    }
});

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

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

return controlesUI;

我希望你能帮助我，我对我的英语很抱歉，如果你需要更多的指示，我会尽力解释

---

提前感谢

您调用它就像调用一个返回对象的类构造函数一样：

var controles = new CrearLeyenda(controlesDiv, map);

然而，CrearLeyenda函数似乎没有这样做。因此，

控制

变量此时为空。尝试添加

console.log（控件）在此之后，请参阅

我认为您需要将此添加到
CrearLeyenda
函数的末尾：

function CrearLeyenda(controlesDiv, map) {
controlesDiv.style.padding = '5px 0px';
var controlesUI = document.createElement('DIV');
controlesUI.style.backgroundColor = 'white';
controlesUI.style.borderStyle = 'solid';
controlesUI.style.borderWidth = '1px';
controlesUI.style.borderColor = 'gray';
controlesUI.style.boxShadow = 'rgba(0, 0, 0, 0.398438) 0px 2px 4px';
controlesUI.style.cursor = 'pointer';
controlesUI.style.textAlign = 'center';
controlesUI.title = 'Click to see Churches';
controlesDiv.appendChild(controlesUI);
var controlesText = document.createElement('DIV');
controlesText.style.fontFamily = 'Arial,sans-serif';
controlesText.style.fontSize = '13px';
controlesText.style.padding = '1px 6px';
controlesText.style.fontWeight = 'bold';
controlesText.innerHTML = 'Controles';
controlesUI.appendChild(controlesText);

google.maps.event.addDomListener(controlesUI, 'click', function () {
    alert("clicked");

    if (controlesText.style.fontWeight == 'bold') {
        controlesText.style.fontWeight = 'normal';
    } else {
        controlesText.style.fontWeight = 'bold';
    }
});

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

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

return controlesUI;

并将其命名为：

var controles = CrearLeyenda(controlesDiv, map);

只需更改
map.controls[google.maps.ControlPosition.TOP\u RIGHT].push（controls），即可解决此问题
到
map.controls[google.maps.ControlPosition.TOP\u RIGHT].push（controlesDiv）。似乎其他代码还可以，或者至少是谷歌地图文档中推荐的代码：

这是邓肯发现的
谢谢你的回复邓肯，我会试试你的解决方案。不管怎样，正如你所看到的，我只是遵循了这个例子，函数是用new作为构造函数调用的，它不返回任何东西。好的，我终于看到了问题所在，多亏了你的回答。你可以这样称呼它，至少是谷歌地图文档中出现的，但是你必须将ControlsDiv而不是Controls传递给地图。谢谢duncan@KevinCifuentesSalas是的，在那个例子中，他们可以调用函数，而不将其分配给变量，
CenterControl（centerControlDiv，map）