Geolocation คือการระบุพิกัด latitude, longitude ที่เราอยู่ด้วยคำสั่ง JavaScript
การระบุพิกัดนี้ ความแม่นยำขึ้นอยู่กับอุปกรณ์ที่ใช้เปิดเว็บไซต์ เช่น โทรศัพท์มือถืออย่าง Android, iPhone จะมี GPS ให้ใช้ และ GPS นี้จะช่วยให้ระบุพิกัดได้อย่างแม่นยำมากๆ
ค่าที่ได้จากการเรียกใช้ Geolocation นี้ไม่ได้มีแค่ lat/long แต่ยังมีค่าอื่นๆอีกหลายค่ามาก มาทดลองกันเลยดีกว่าครับ
สร้างหน้า HTML ขึ้นมาสักหน้าหนึ่ง ดังนี้
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ทดสอบ geolocation</title>
</head>
<body>
ตำแหน่งของฉัน:
<div id="geolocationResult"></div>
</body>
</html>
เริ่มต้นกับ Geolocation
ตรวจว่าเบราว์เซอร์ของผู้ใช้รองรับ Geolocation หรือไม่
<script type="application/javascript">
if ('geolocation' in navigator) {
// ตรงนี้คือรองรับ geolocation
} else {
alert('เบราเซอร์นี้ไม่รองรับ geolocation');
}
</script>
เรียกขอตำแหน่ง Geolocation
เรียกฟังก์ชั่น ตรวจหาตำแหน่ง โดยเรียกภายในเงื่อนไข if ('geolocation' in navigator) โดยใช้คำสั่ง navigator.geolocation.getCurrentPosition() ซึ่งคำสั่งนี้จะมีรองรับทั้งหมด 3 พารามิเตอร์ด้วยกัน คือ
- ฟังก์ชั่นเมื่อขอตำแหน่งสำเร็จ
- ฟังก์ชั่นเมื่อขอตำแหน่งไม่สำเร็จ
- ตัวเลือกต่างๆ
สามารถดูอ้างอิงเพิ่มเติมได้ที่เว็บไซต์ Mozilla.
<script type="application/javascript">
if ('geolocation' in navigator) {
// ตรงนี้คือรองรับ geolocation
navigator.geolocation.getCurrentPosition(function(position) {
// function เมื่อขอตำแหน่งสำเร็จ
var location = position.coords;
// ตรวจหาตำแหน่งได้แล้ว
}, function() {
// function เมื่อขอตำแหน่งไม่สำเร็จ
alert('มีปัญหาในการตรวจหาตำแหน่ง');
});
} else {
alert('เบราเซอร์นี้ไม่รองรับ geolocation');
}
</script>
เมื่อหาตำแหน่งได้แล้ว จะได้ค่า position ซึ่งค่านี้เองที่จะเอามาชี้รายละเอียดต่อไปว่าเราต้องการค่าอะไรจากมันบ้าง ดูตัวอย่างต่อไปกันเลยครับ
<script type="application/javascript">
if ('geolocation' in navigator) {
// ตรงนี้คือรองรับ geolocation
navigator.geolocation.getCurrentPosition(function(position) {
let coords = position.coords;
let geolocationResult = document.getElementById('geolocationResult');
geolocationResult.insertAdjacentHTML('beforeend', 'lat: '+coords.latitude+'<br />long: '+coords.longitude+'<br /> altitude: '+coords.altitude+'<br /> accuracy: '+coords.accuracy+'<br /> altitude accuracy: '+coords.altitudeAccuracy+'<br /> heading: '+coords.heading+'<br /> speed: '+coords.speed);
}, function() {
alert('มีปัญหาในการตรวจหาตำแหน่ง');
});
} else {
alert('เบราเซอร์นี้ไม่รองรับ geolocation');
}
</script> ค่าพิกัดต่างๆที่เรียกใช้ได้ มีมากมายหลายค่าตามที่เห็นในตัวอย่าง หากต้องการดูโดยละเอียดว่าพิกัดแบบใด มีค่าเป็นอะไร (integer, double, null, ...) ให้ดูได้ที่ w3 geolocation.
ตัวอย่างโดยรวม
หากทำตามขั้นตอนและทำความเข้าใจกับมันแล้ว ก็จะพบว่าเขียนออกมาก็จะได้ดังนี้
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ทดสอบ geolocation</title>
</head>
<body>
ตำแหน่งของฉัน:
<div id="geolocationResult"></div>
<script type="application/javascript">
if ('geolocation' in navigator) {
// ตรงนี้คือรองรับ geolocation
navigator.geolocation.getCurrentPosition(function(position) {
let coords = position.coords;
let geolocationResult = document.getElementById('geolocationResult');
geolocationResult.insertAdjacentHTML('beforeend', 'lat: '+coords.latitude+'<br />long: '+coords.longitude+'<br /> altitude: '+coords.altitude+'<br /> accuracy: '+coords.accuracy+'<br /> altitude accuracy: '+coords.altitudeAccuracy+'<br /> heading: '+coords.heading+'<br /> speed: '+coords.speed);
}, function() {
alert('มีปัญหาในการตรวจหาตำแหน่ง');
});
} else {
alert('เบราเซอร์นี้ไม่รองรับ geolocation');
}
</script>
</body>
</html>
จากนั้นทดลองเรียกเว็บเพจ โดยเรียกผ่านทาง web server และ protocol HTTPS เท่านั้น เช่น https://localhost
โดยเมื่อเรียกแล้ว ในครั้งแรกเบราเซอร์จะถามถึงการอนุญาต access location ก็ให้เรากดอนุญาตแล้วรอสักพัก ข้อมูลต่างๆจะปรากฏขึ้นมาใต้คำว่าตำแหน่งของฉัน:
หากข้อมูลไม่ขึ้น ก็จะมี alert ขึ้นมาแทน ซึ่งเบราเซอร์รุ่นใหม่ๆจะทดลองได้ไม่มีปัญหา
ตัวอย่างการทำงานจริง
ตัวอย่างด้านบนนี้ อาจมีขีดจำกัดเรื่องไม่สามารถร้องขอตำแหน่งได้ สามารถเปิดดูได้โดยตรงบน Codepen.
7 comments on “หาตำแหน่งของคุณด้วย geolocation ใน html5”
ขอบคุณ
Good
คำขอตำแหน่งที่ตั้งทางภูมิศาสตร์สามารถดำเนินการได้ในบริบทที่ปลอดภัยเท่านั้น แบบนี้ทำไงหราครับ
https://
กรณีจะนำค่า Lat,Long insert ลง db ล่ะครับ พอมีตัวอย่างไหม
ทำไมเปิดผ่านมือถือไม่ได้คับ
เปิดได้ครับ https://codepen.io/ve3/pen/xxXXmGv
ใช้ https://