angular - Cómo llamar a una función de TypeScript dentro del callback de un JavaScript
Estoy usando el componente javascript Google Maps en el framework frontend Angular 5
export class MapComponent implements OnInit {
ngOnInit() {
this.initializeGMap()
}
initializeGMap() {
var myLatlng = new google.maps.LatLng(12,77);
var mapOptions = {
zoom: DEFAULT_MAP_ZOOM,
center: myLatlng,
scrollwheel: true,
styles: MAP_STYLE
};
this.map = new google.maps.Map(document.getElementById("map"), mapOptions);
this.initOnMapClickListener();
}
initOnMapClickListener() {
google.maps.event.addListener(this.map, 'click', function(event) {
var selectedLocation = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng());
this.addMarker(selectedLocation)
});
}
addMarker(latlng) {
var marker = new google.maps.Marker({
position: latlng,
map: this.map,
icon: './assets/map_marker.png'
});
}
}
Arriba está mi archivo de TypeScript, tiene tres funciones
- initializeGMap() //para inicializar Google Maps
- initOnMapClickListener() //para inicializar el listener de clic en el mapa
- addMarker(latlng)/para agregar el marcador cuando ocurre el evento onmapclick
Error de tipo no detectado: No se puede leer la propiedad 'addMarker' de null
Este es el error de consola que obtengo si ejecuto la aplicación Angular
Por favor, ayude a entender cómo llamar a una función de TypeScript dentro de un callback de Javascript
Respuesta #1
Intenta llamar a la función usando una función flecha => así para enlazar al alcance léxico de this -
initOnMapClickListener() {
google.maps.event.addListener(this.map, 'click', (event) => {
var selectedLocation = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng());
this.addMarker(selectedLocation)
});
}
