javascript - Angular - 无法访问其他函数或变量

Question

我已经研究这个问题有一段时间了，并且查找了 Angular 范围，但在某些方面我似乎仍然在努力解决它。基本上，我正在屏幕上设置一个谷歌地图对象。添加标记和其他内容需要立即通过此设置函数完成，目前还可以，但是当我获得指向标记的指示时，我想调用我的 showLocationInfo() 方法。无论有多少 this.showLocationInfo() 或任何其他引用 showLocationDetails bool 值的尝试都不起作用，我似乎无法找出哪里出错了。

import {Geolocation} from "@ionic-native/geolocation/ngx";
import {error} from "util";
let directionsService = new google.maps.DirectionsService();
let directionsRenderer = new google.maps.DirectionsRenderer({suppressMarkers: true});
let selectedMarker;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  map;
  @ViewChild('mapElement', {static: true}) mapElement;

  globalScope: any = this;
  latitude: any;
  longitude: any;
  showLocationDetails: boolean = false;

  constructor(private geolocation: Geolocation) {}

  ngOnInit(): void {}

  ngAfterViewInit(): void {
      this.setupMap();
  }

  setupMap(): void {
      this.geolocation.getCurrentPosition().then((resp) => {
          this.latitude = resp.coords.latitude;
          this.longitude = resp.coords.longitude;
          // This is creating our default map if there is no geolocation
          const map = new google.maps.Map(
              this.mapElement.nativeElement,
              {
                  center: {
                      lat: 53.418813,
                      lng: -7.903869
                  },
                  zoom: 15,
                  disableDefaultUI: true,
                  streetViewControl: true,
                  zoomControl: true
              });
          directionsRenderer.setMap(this.map);
          // This is creating our info window and setting the location to our geolocation
          const infoWindow = new google.maps.InfoWindow();
          const pos = {
                  lat: this.latitude,
                  lng: this.longitude
              };
          infoWindow.setPosition(pos);
          infoWindow.setContent('Location found.');
          infoWindow.open(map);
          map.setCenter(pos);

          // This recognises the user's click and places a marker at that location
          map.addListener('click', function(e) {
              let marker = new google.maps.Marker({
                  position: e.latLng,
                  animation: google.maps.Animation.DROP,
                  map: map
              });
              // This adds clickable events to each of the placed markers
                      marker.addListener('click', function(e) {
                          selectedMarker = marker;
                          map.setCenter(marker.getPosition());
                          map.panTo(e.latLng);
                          let request : google.maps.DirectionsRequest = {
                              origin : pos,
                              destination : e.latLng,
                              travelMode: google.maps.TravelMode.WALKING
                          };
                          directionsService.route(request, function(result, status) {
                              if (status == 'OK') {
                                  directionsRenderer.setDirections(result);
                                  directionsRenderer.setOptions({
                                       suppressPolylines: false
                                  });
                                  directionsRenderer.setMap(map);
                                  this.showLocationInfo();
                              }
                          });
                      });
          });

      }).catch((error) => {
          console.log('Error getting location', error);

          this.map = new google.maps.Map(
              this.mapElement.nativeElement,
              {
                  center: {
                      lat: 53.418813,
                      lng: -7.903869
                  },
                  zoom: 15,
                  disableDefaultUI: true,
                  streetViewControl: true,
                  zoomControl: true,
                  rotateControl: true
              });
      });
  }

  showLocationInfo(): void {
      this.showLocationDetails = true;
  }

  hideLocationInfo(): void {
      this.showLocationDetails = false;
  }
}```

Answer 1

您必须使用 addListener 的箭头函数来引用正确的上下文

试试这个:

 // This recognises the user's click and places a marker at that location
          map.addListener('click', (e)=> {
              let marker = new google.maps.Marker({
                  position: e.latLng,
                  animation: google.maps.Animation.DROP,
                  map: map
              });
              // This adds clickable events to each of the placed markers
                      marker.addListener('click', function(e) {
                          selectedMarker = marker;
                          map.setCenter(marker.getPosition());
                          map.panTo(e.latLng);
                          let request : google.maps.DirectionsRequest = {
                              origin : pos,
                              destination : e.latLng,
                              travelMode: google.maps.TravelMode.WALKING
                          };
                          directionsService.route(request, function(result, status) {
                              if (status == 'OK') {
                                  directionsRenderer.setDirections(result);
                                  directionsRenderer.setOptions({
                                       suppressPolylines: false
                                  });
                                  directionsRenderer.setMap(map);
                                  this.showLocationInfo();
                              }
                          });
                      });
          });

      }).catch((error) => {
          console.log('Error getting location', error);

          this.map = new google.maps.Map(
              this.mapElement.nativeElement,
              {
                  center: {
                      lat: 53.418813,
                      lng: -7.903869
                  },
                  zoom: 15,
                  disableDefaultUI: true,
                  streetViewControl: true,
                  zoomControl: true,
                  rotateControl: true
              });
      });