Uncaught TypeError: Kann die Eigenschaft 'zIndex' von undefined in Ionic (AngularJS) nicht lesen

Question

Vielen Dank für das Betrachten der Frage.

Ich mache eine ionische App für die Stadt, in der ich lebe. Es verwendet Google Maps, um einige Informationen zur Stadt anzuzeigen. Außerdem möchte ich benutzerdefinierte Steuerelemente auf der Karte platzieren, um verschiedene Arten von Markierungen anzuzeigen, die Dienste wie Bushaltestellen oder Krankenhäuser sind. Das Problem ist, dass ich diesen Fehler nicht lösen kann: "Uncaught TypeError: Kann die Eigenschaft 'zIndex' von undefined" nicht lesen und habe die meisten anderen Antworten auf diese Frage ausprobiert.

Ich versuche, das Element hinzuzufügen (ich denke, dass Legend sein Name ist) in einem Controller meiner app, so wie diese:

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

Dann außerhalb der Steuerung, ich habe die CrearLeyenda Funktion:

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

ich hoffe, dass Sie mir helfen können und es tut mir leid für mein Englisch, ich werde versuchen, so gut wie ich kann erklären, wenn Sie mehr Hinweise benötigen.

Vielen Dank im Voraus

Answer 1

Sie das Problem map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controles); auf sich ändernde nur lösen können map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlesDiv);. Es scheint, dass der andere Code ist in Ordnung oder zumindest ist das, was bei Google Maps docs empfohlen: https://developers.google.com/maps/documentation/javascript/examples/control-custom

Dieser Dank entdeckt wurde

Answer 2

Du nennst dies, als ob es eine Klasse Konstruktor war ein Objekt zurückzukehr:

var controles = new CrearLeyenda(controlesDiv, map); 

jedoch die CrearLeyenda Funktion etwas zu tun nicht so scheint. Also ist die controles Variable zu diesem Zeitpunkt NULL. Versuchen Sie, direkt danach console.log(controles); hinzuzufügen und zu sehen.

Ich glaube, Sie dies bis zum Ende der CrearLeyenda Funktion hinzufügen müssen:

return controlesUI; 

Und ändern, wie Sie es nennen:

var controles = CrearLeyenda(controlesDiv, map);