uncatch TypeError： 无法读取 Ionic (AngularJS) 中未定义的属性'zIndex'

Question

感谢收看此问题。

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

我正试图在我的应用程序的控制器中添加元素（我认为Legend就是它的名字），就像这样：

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

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

提前感谢

Answer 1

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

var controles = new CrearLeyenda(controlesDiv, map);

然而，CrearLeyenda函数似乎并没有这样做。因此controles变量此时为NULL。请尝试在此之后添加console.log(controles);，然后参阅。

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

return controlesUI;

并将其更改为：

var controles = CrearLeyenda(controlesDiv, map);

Answer 2

只需将map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controles);更改为map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlesDiv);即可解决问题。看起来其他代码还可以，或者至少是谷歌地图文档中推荐的代码：https://developers.google.com/maps/documentation/javascript/examples/control-custom

这是由于duncan 发现的