Uncaught TypeError: Невозможно прочитать свойство «zIndex» undefined in Ionic (AngularJS)

Question

Спасибо, что посмотрели этот вопрос.

Я занимаюсь ионным приложением для города, в котором я живу. Он использует карты Google для отображения некоторой информации, относящейся к городу. Более того, я хочу поместить на карту пользовательские элементы управления, чтобы показать разные типы маркеров, которые являются такими услугами, как остановки автобусов или больницы. Проблема в том, что я не могу решить эту ошибку: «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

Вы можете решить эту проблему просто меняющегося map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controles); к map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlesDiv);. Кажется, что другой код OK или, по крайней мере, это то, что рекомендуется в Google Maps Документов https://developers.google.com/maps/documentation/javascript/examples/control-custom

Это было обнаружено благодаря Duncan

Answer 2

Вы называете это, как если бы это был конструктор класса, возвращающую объект:

var controles = new CrearLeyenda(controlesDiv, map); 

Однако функция CrearLeyenda, кажется, не делать ничего подобного. Таким образом, переменная controles на данный момент равна NULL. Попробуйте добавить console.log(controles); сразу после этого и посмотрите.

Я думаю, что нужно добавить это к концу CrearLeyenda функции:

return controlesUI; 

И изменить то, как вы называете его:

var controles = CrearLeyenda(controlesDiv, map);