fix code

2026-04-30 16:07:21 +07:00 · 2026-04-30 16:07:21 +07:00 · 0a6fc4a974
commit 0a6fc4a974
parent 365d55d310
1 changed files with 0 additions and 0 deletions
--- a/src/components/MapCheckin.vue
+++ b/src/components/MapCheckin.vue
@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { GoogleMap, Marker } from 'vue3-google-map'
+import { useQuasar } from 'quasar'
+
+const $q = useQuasar()
+
+const googleMapsApiKey = 'AIzaSyBzPSF5NxUZ1G8DKBnJvJPTqCR0Ct2xf58'
+
+declare var google: any
+const center = ref<any>()
+const location = ref<string>('')
+const test = ref()
+
+const emit = defineEmits(['update:location'])
+const updateLocation = (location: any, namePOI: string) => {
+  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
+  emit('update:location', location, namePOI)
+}
+
+/** function  หาตำแหน่ง*/
+function findNearestPlace() {
+  if (navigator.geolocation) {
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        const userLocation = {
+          lat: position.coords.latitude,
+          lng: position.coords.longitude,
+        }
+
+        // ส่ง Location ไปยัง API เพื่อหาสถานที่ที่ใกล้ที่สุด
+        findNearestPlaceFromAPI(userLocation)
+        center.value = userLocation
+      },
+      (error) => {
+        console.error(error)
+        // Show user-friendly error message
+        let errorMessage = 'ไม่สามารถระบุตำแหน่งได้'
+        switch (error.code) {
+          case error.PERMISSION_DENIED:
+            errorMessage = 'คุณปฏิเสธการอนุญาตให้เข้าถึงตำแหน่ง'
+            break
+          case error.POSITION_UNAVAILABLE:
+            errorMessage = 'ข้อมูลตำแหน่งไม่พร้อมใช้งาน'
+            break
+          case error.TIMEOUT:
+            errorMessage = 'หมดเวลาในการระบุตำแหน่ง'
+            break
+        }
+        $q.notify({
+          type: 'negative',
+          message: errorMessage,
+          position: 'top',
+        })
+      }
+    )
+  } else {
+    $q.notify({
+      type: 'negative',
+      message: 'เบราว์เซอร์ไม่รองรับการระบุตำแหน่ง',
+      position: 'top',
+    })
+  }
+}
+
+/**
+ * function หาสถานที่ที่ใกล้ที่สุด
+ * @param userLocation   พิกัดละติจูด พิกัดลองจิจูด
+ */
+function findNearestPlaceFromAPI(userLocation: any) {
+  const placesService = new google.maps.places.PlacesService(
+    document.createElement('div')
+  )
+
+  const request = {
+    location: userLocation,
+    radius: 1000, // รัศมีในเมตร
+    types: ['point_of_interest'], // ประเภทของสถานที่ที่คุณต้องการค้นหา
+  }
+
+  placesService.nearbySearch(request, (results: any, status: any) => {
+    if (status === google.maps.places.PlacesServiceStatus.OK) {
+      // console.log('Nearby places:', results[0])
+      const place = results[0]
+      location.value = place.name
+      test.value = place.geometry.location
+      updateLocation(center.value, location.value)
+    } else {
+      console.error('Error fetching nearby places:', status)
+    }
+  })
+}
+
+// hook
+onMounted(() => {
+  findNearestPlace()
+})
+
+// Cleanup resources
+onBeforeUnmount(() => {
+  // Clear location reference to prevent memory leaks
+  center.value = undefined
+  location.value = ''
+  test.value = undefined
+})
+</script>
+
+<template>
+  <q-card
+    bordered
+    flat
+    class="col-12 bg-grey-2 shadow-0"
+    :style="$q.screen.gt.xs ? 'height: 350px;' : 'height: 360px;'"
+  >
+    <div style="width: 100%; height: 90%">
+      <GoogleMap
+        :api-key="googleMapsApiKey"
+        style="width: 100%; height: 100%"
+        :center="center"
+        :zoom="15"
+        disable-default-ui
+        disable-double-click-zoom
+        :scrollwheel="false"
+        gesture-handling="none"
+        :clickable-icons="false"
+      >
+        <Marker :options="{ position: center }" />
+        <Marker
+          :options="{
+            position: test,
+            icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
+          }"
+        />
+      </GoogleMap>
+    </div>
+
+    <div
+      :class="
+        $q.screen.gt.xs
+          ? 'q-pa-sm text-weight-medium text-grey-8'
+          : ' text-weight-medium text-grey-8'
+      "
+    >
+      พื้นที่ใกล้เคียง
+      <span class="q-px-sm">:</span>
+      {{ location }}
+    </div>
+  </q-card>
+</template>
+
+<style scoped></style>