i want to override the value of lat and lng variable in angular-CodePudding

    export class test implements OnInit {

    lat = 1; 
    lng = 2;

this lat, lng not accessible in the showPosition function

I want to access this lat, lng in showPosition Function

 ngOnInit() {
  let lat2 : any;
  let lng2 : any;
 function getLocation() {
 if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition);
 } else {
  alert("Geolocation is not supported by this browser.");
 }
}
 function showPosition(position) {
  lat2 = position.coords.latitude;
  lng2 = position.coords.longitude;
  console.log(this.lat);
}

getLocation();
console.log(lat2);
 }
 }

//this lat2, lng2 not accessible outside the showPosition function

output

Cannot read properties of null

undefined

CodePudding user response：

I think this is your first time dealing with asynchronous calls. It takes time to get a response, so you can't just use the data immediately. Basically you have three options to handle them: Callbacks, Promises, or Observables.

Callback - put everything you want to do in a callback function - this is the old way.

  lat = 1;
  lng = 2;
  lat2: any;
  lng2: any;

  ngOnInit() {
    const getLocation = () => {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
      } else {
        alert('Geolocation is not supported by this browser.');
      }
    };
    const showPosition = (position: any) => {
      this.lat2 = position.coords.latitude;
      this.lng2 = position.coords.longitude;
      console.log(this.lat);
      console.log(this.lat2);
    };

    getLocation();
  }

Promise - used with async and await - this makes the code look more synchronous

  lat = 1;
  lng = 2;
  lat2: any;
  lng2: any;

  async ngOnInit() {
    const getLocation = async () =>
      new Promise<void>((resolve, reject) => {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition((position: any) => {
            this.lat2 = position.coords.latitude;
            this.lng2 = position.coords.longitude;
            console.log(this.lat);
            resolve();
          });
        } else {
          alert('Geolocation is not supported by this browser.');
          reject();
        }
      });

    await getLocation();
    console.log(this.lat2);
  }

Observables - you can subscribe to these with more callback functions, this is the most popular way and relies on the RXJS library. You're going to need to learn these if ever you use the HttpClient Angular service for performing http requests.

  lat = 1;
  lng = 2;
  lat2: any;
  lng2: any;

  ngOnInit() {
    const getLocation$ = new Observable((observer) => {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition((position: any) => {
          this.lat2 = position.coords.latitude;
          this.lng2 = position.coords.longitude;
          console.log(this.lat);
          observer.next(position);
          observer.complete();
        });
      } else {
        alert('Geolocation is not supported by this browser.');
        observer.complete();
      }
    });

    getLocation$.subscribe((position: any) => {
      console.log(this.lat2);
    });
  }

These are just rough examples but hopefully that gets you on the right track.

Forgot to mention the useful extension of an Observable - Subject

  lat = 1;
  lng = 2;
  lat2: any;
  lng2: any;
  subject = new Subject<any>();

  ngOnInit() {
    const getLocation = () => {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition((position: any) => {
          this.lat2 = position.coords.latitude;
          this.lng2 = position.coords.longitude;
          console.log(this.lat);
          this.subject.next(position);
        });
      } else {
        alert('Geolocation is not supported by this browser.');
      }
    };

    getLocation();
    this.subject.subscribe((position) => console.log(this.lat2));
  }