hrms-checkin/src/components/MapCheckin.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { GoogleMap, Marker } from 'vue3-google-map'

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)
        console.log('erroe')
      }
    )
  } else {
    console.error('เบราว์เซอร์ไม่รองรับการระบุตำแหน่ง')
  }
}

/**
 * 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()
})
</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="AIzaSyBzPSF5NxUZ1G8DKBnJvJPTqCR0Ct2xf58"
        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>