diff --git a/src/components/DestinationInfoCard.vue b/src/components/DestinationInfoCard.vue index ddd0003..a6b60b6 100644 --- a/src/components/DestinationInfoCard.vue +++ b/src/components/DestinationInfoCard.vue @@ -104,6 +104,7 @@ background-color: rgba(230, 230, 230, 1); padding-left: 2vw;" variant="invert-solo" + :model-value="formattedLocation" flat > ย้อนกลับ - + เริ่มการนำทาง @@ -238,13 +239,24 @@ export default { data() { return { showPopup: true, - showRoute: false + showRoute: false, + userLocation: null, + isLocationRequested: false, + }; }, computed: { cardHeight() { return this.showRoute ? '45vh' : '60vh'; }, + formattedLocation() { + if (this.isLocationRequested && !this.userLocation) { + return 'Requesting location...'; + } else if (this.userLocation) { + return `${this.userLocation.lat.toFixed(6)}, ${this.userLocation.lon.toFixed(6)}`; + } + return 'Location not available'; + }, }, methods: { closePopup() { @@ -252,8 +264,31 @@ export default { this.onClose(); }, viewRoute() { + this.getUserLocation(); this.showRoute = true; }, + enterRoute() { + console.log("Enter Route"); + }, + getUserLocation() { + this.isLocationRequested = true; + if (navigator.geolocation) { + navigator.geolocation.getCurrentPosition(this.setLocation, this.handleLocationError); + } else { + console.error("Geolocation is not supported by this browser."); + } + }, + setLocation(position) { + this.userLocation = { + lat: position.coords.latitude, + lon: position.coords.longitude + }; + console.log('User Location:', this.userLocation); + }, + + handleLocationError(error) { + console.error('Error getting location:', error); + }, viewPopup(){ this.showPopup = true; this.showRoute = false;