Búsqueda de sitios web

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

  1. initializeGMap() //para inicializar Google Maps
  2. initOnMapClickListener() //para inicializar el listener de clic en el mapa
  3. 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)
    });
  }

Artículos relacionados