151 lines
4.5 KiB
Vue
151 lines
4.5 KiB
Vue
<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>
|