Recently, I developed a compact geolocation watch using the following code snippet:
navigator.geolocation.watchPosition(
this.updateLocation.bind(this),
this.errorLocation.bind(this),
{enableHighAccuracy: true}
);
The function updateLocation is defined as follows:
private updateLocation(position: Position) {
this.myLatitude = position.coords.latitude;
this.myLongitude = position.coords.longitude;
this.myAccuracy = position.coords.accuracy;
if (position.coords.heading != null) {
this.myHeading = Game.toRad(position.coords.heading);
}
this.GPSWorking = true;
}
While the code seems to be functioning correctly and updating GPS data accurately, there's a minor issue with the heading always returning "null". Despite trying various settings, the heading consistently remains null.
I am aware that my phone has a functional gyroscope, given that native Android apps can retrieve the heading. Additionally, Google Maps on the web browser (Chrome) can determine my heading accurately. Is there something I overlooked in my code?
A small fiddle is available for testing purposes: https://jsfiddle.net/8p5rngtk/15/. My main focus is on resolving the heading issue while demonstrating GPS functionality on devices.
Edit:
Suddenly, the code started working flawlessly as intended. However, I observed that the update frequency is significantly slower compared to when it was implemented as a native application. This slower pace renders it unreliable for my current application needs.
If anyone has insights into why it intermittently works or suggestions for improving its consistency, it would greatly benefit future troubleshooting.