I'm building a mobile app for android using Sveltekit and Capacitor. I basically followed a simple tutorial to create an app where you retrieve your Lat and Long after clicking a button. When I use VS Code Liver Server or npm run dev, the app populates, and when clicking the button to Get Current Location, the browser asks to allow using location. After selecting yes, the Lat and Long populates as expected (I blocked out the entire Lat and Long on the image below, but it does populate fully - see image below).
When I use Android Studio, everything loads and builds appropriately. When I click Get Current Location, Android Studio emulator asks to allow use of location, which I allow, but then the page never updates with the Lat and Long like it does with Live Server and using the terminal commands. The button indicates it's being clicked in the emulator (and Android Studio asks to allow location use), but Lat and Long doesn't populate in the app (see image below).
I've sync'd the project with npx cap sync and when I look at the files in Android Studio, they are identical. I'm wondering why it's not functioning properly in Android Studio.
Code in +page.svelte:
<script>
import { Geolocation } from '@capacitor/geolocation';
/**
* @type {import("@capacitor/geolocation").Position | null}
*/
let loc = null;
async function getCurrentPosition() {
const res = await Geolocation.getCurrentPosition();
loc = res;
}
</script>
<div>
<h1>Geolocation</h1>
<p>Your location is:</p>
<p>Latitude: {loc?.coords.latitude}</p>
<p>Longitude: {loc?.coords.longitude}</p>
<button onclick={getCurrentPosition}>
Get Current Location
</button>
</div>
<style>
div {
padding-top: 50px;
}
</style>
Output using npm run dev
Output in Android Studio:
