diff --git a/src/components/AscGISMap.vue b/src/components/AscGISMap.vue index 9bed6e4..45b83d1 100644 --- a/src/components/AscGISMap.vue +++ b/src/components/AscGISMap.vue @@ -2,10 +2,16 @@ import { onMounted, ref } from 'vue' import { loadModules } from 'esri-loader' import axios from 'axios' +import { useCounterMixin } from '@/stores/mixin' +import { useQuasar } from 'quasar' -import type { LocationObject } from '@/interface/index/Main' +const mixin = useCounterMixin() +const { messageError } = mixin +// import type { LocationObject } from '@/interface/index/Main' +const mapElement = ref(null) const emit = defineEmits(['update:location']) +const $q = useQuasar() function updateLocation(latitude: number, longitude: number, namePOI: string) { // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props @@ -191,6 +197,61 @@ async function initializeMap() { } } +const locationGranted = ref(false) +// Function to request location permission +const requestLocationPermission = () => { + if (!navigator.geolocation) { + messageError( + $q, + '', + 'ไม่สามารถระบุตำแหน่งปัจจุบันได้ เบราว์เซอร์ของคุณไม่รองรับ Geolocation' + ) + return + } + + navigator.geolocation.getCurrentPosition( + () => { + // Permission granted + locationGranted.value = true + + // Center map on user's location if map is initialized + initializeMap() + }, + (error) => { + // Permission denied + locationGranted.value = false + + switch (error.code) { + case error.PERMISSION_DENIED: + messageError( + $q, + '', + 'ไม่สามารถระบุตำแหน่งปัจจุบันได้ เนื่องจากคุณปฏิเสธการเข้าถึงตำแหน่ง กรุณาเปิดการเข้าถึงตำแหน่ง' + ) + break + case error.POSITION_UNAVAILABLE: + messageError($q, '', 'ไม่สามารถระบุตำแหน่งปัจจุบันได้') + break + case error.TIMEOUT: + messageError($q, '', 'การร้องขอตำแหน่งหมดเวลา กรุณาลองอีกครั้ง') + break + default: + messageError( + $q, + '', + 'ไม่สามารถระบุตำแหน่งปัจจุบันได้ เกิดข้อผิดพลาดไม่ทราบสาเหตุในการเข้าถึงตำแหน่ง' + ) + break + } + }, + { enableHighAccuracy: true } + ) +} + +defineExpose({ + requestLocationPermission, +}) + onMounted(async () => { await initializeMap() }) @@ -215,7 +276,11 @@ onMounted(async () => { :style="$q.screen.gt.xs ? ';' : 'border-radius: 20px'" >
-
+
@@ -661,7 +674,7 @@ onMounted(async () => {
- +
@@ -975,6 +988,7 @@ onMounted(async () => { +