117 lines
3.4 KiB
Vue
117 lines
3.4 KiB
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>
|