I have been facing a challenge while trying to set up an object for the Ionic Capacitor Google Maps API in order to configure the map upon creation. The issue I am encountering is that the value of the reference I am using is not persistent and keeps reverting to its default value. Despite spending several days attempting to resolve this issue, I have not been successful. I would greatly appreciate any assistance in demonstrating how to address this problem. Below is the code snippet:
<script setup lang="ts">
import { computed, ref, onMounted } from "vue";
import { Geolocation } from "@capacitor/geolocation";
const currPos = ref<any | null>(null);
const lat = ref<number>(1);
const lng = ref<number>(2);
const getLocation = async () => {
console.log("got getLocation event");
currPos.value = await Geolocation.getCurrentPosition({
enableHighAccuracy: true,
timeout: 20000,
});
lat.value = currPos.value.coords.latitude;
lng.value = currPos.value.coords.longitude;
};
const centerLat = computed(() => (lat.value ? lat.value : 3));
const mapConfig = {
center: {
// The initial position to be rendered by the map
// lat: 32.78025, // this works
// lng: -117.19335, // this works
lat: centerLat.value as number, // not working, is 1
lng: lng.value as number, // not working, is 2
},
zoom: 10,
};
const logLocData = () => {
console.log("Latitude", lat.value); // shows correct number for lat
console.log("Longitude", lng.value); // shows correct number for lng
console.log("Center Latitude", centerLat.value); // shows correct number for centerLat
console.log("MapCofig", mapConfig); // wrong, shows center and 1 for lat and 2 for lng
console.log("MapCofig Latitude", mapConfig.center.lat); // wrong, shows 1 for lat
console.log("MapCofig Longitude", mapConfig.center.lng); // wrong, shows 2 for lng
};
onMounted(() => {
console.log("mounted");
getLocation();
});
</script>
Console log:
mounted
got getLocation event
Latitude 32.7822162
Longitude -117.1852825
Center Latitude 32.7822162
MapCofig {center: {…}, zoom: 10}
MapCofig Latitude 1
MapCofig Longitude 2