geolocation คือการระบุพิกัด latitude, longitude ที่เราอยู่ด้วยคำสั่ง javascript ที่มาใหม่กับ html5
การระบุพิกัดนี้ ความแม่นยำขึ้นอยู่กับอุปกรณ์ที่ใช้เปิดเว็บไซต์ เช่น โทรศัพท์มือถืออย่าง android, iphone จะมี gps ให้ใช้ และ gps นี้จะช่วยให้ระบุพิกัดได้อย่างแม่นยำมากๆ
ค่าที่ได้จากการเรียกใช้ geolocation นี้ไม่ได้มีแค่ lat/long แต่ยังมีค่าอื่นๆอีกหลายค่ามาก มาทดลองกันเลยดีกว่าครับ
สร้างหน้า html ขึ้นมาสักหน้าหนึ่ง ดังนี้
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ทดสอบ geolocation</title> </head> <body> ตำแหน่งของฉัน: <div id="geo_data"></div> </body> </html>
และก่อนจะไปขั้นถัดไป ผมอยากแนะนำให้ใช้ jquery เพื่อที่จะได้เขียน javascript ได้ง่ายๆและสั้นลงครับ
ดาวน์โหลด jquery มาติดตั้ง และแทรกโค้ดลงไปในส่วนของ head
<script type="text/javascript" src="jquery.min.js"></script>หรือใช้ jquery กับ google ตามบรรทัดล่างนี้
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
เริ่มต้นกับ geolocation
ตรวจหาก่อนเลยครับว่าเบราเซอร์ผู้ใช้ รองรับ geolocation หรือไม่
โดยใช้โค้ดนี้ใส่ในส่วนของ head หรือ body ก็ได้ครับ
<script type="text/javascript">
if ( navigator.geolocation ) {
// ตรงนี้คือรองรับ geolocation
} else {
alert('เบราเซอร์นี้ไม่รองรับ geolocation');
}
</script>
เรียกฟังก์ชั่น ตรวจหาตำแหน่ง โดยเรียกภายในเงื่อนไข if ( navigator.geolocation ) {
<script type="text/javascript">
if ( navigator.geolocation ) {
// ตรงนี้คือรองรับ geolocation
navigator.geolocation.getCurrentPosition(function(location) {
var location = location.coords;
// ตรวจหาตำแหน่งได้แล้ว
}, function() {
alert('มีปัญหาในการตรวจหาตำแหน่ง');
});
} else {
alert('เบราเซอร์นี้ไม่รองรับ geolocation');
}
</script>
ถึงตรงนี้จะพบว่ามีเงื่อนไขตรวจว่าเบราเซอร์รองรับหรือไม่ จากนั้นข้างในฟังก์ชั่นตรวจหาตำแหน่งยังมีเผื่อกรณีที่มีปัญหาในการตรวจหาตำแหน่งอีก เช่น เมื่อมีการหาตำแหน่ง แต่ผู้ใช้ไม่ยอม share location ก็จะมาที่ฟังก์ชั่นย่อยนี้ และ alert ว่ามีปัญหาในการตรวจหาตำแหน่ง
และหากหาตำแหน่งได้แล้ว ค่า location นี้เองที่จะเอามาชี้รายละเอียดต่อไปว่าเราต้องการค่าอะไรจากมันบ้าง ดูตัวอย่างต่อไปกันเลยครับ
<script type="text/javascript">
if ( navigator.geolocation ) {
// ตรงนี้คือรองรับ geolocation
navigator.geolocation.getCurrentPosition(function(location) {
var location = location.coords;
$("#geo_data").html('lat: '+location.latitude+'<br />long: '+location.longitude+'<br /> altitude: '+location.altitude+'<br /> accuracy: '+location.accuracy+'<br /> altitude accuracy: '+location.altitudeAccuracy+'<br /> heading: '+location.heading+'<br /> speed: '+location.speed);
}, function() {
alert('มีปัญหาในการตรวจหาตำแหน่ง');
});
} else {
alert('เบราเซอร์นี้ไม่รองรับ geolocation');
}
</script>
ค่าพิกัดต่างๆที่เรียกใช้ได้ มีมากมายหลายค่าตามที่เห็นในตัวอย่าง หากต้องการดูโดยละเอียดว่าพิกัดแบบใด มีค่าเป็นอะไร (integer, double, null, ...) ให้ดูได้ที่ w3 geolocation โดยตรงได้เลยครับ
ตัวอย่างโดยรวม
หากทำตามขั้นตอนและทำความเข้าใจกับมันแล้ว ก็จะพบว่าเขียนออกมาก็จะได้ดังนี้
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ทดสอบ geolocation</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
ตำแหน่งของฉัน:
<div id="geo_data"></div>
<script type="text/javascript">
if ( navigator.geolocation ) {
// ตรงนี้คือรองรับ geolocation
navigator.geolocation.getCurrentPosition(function(location) {
var location = location.coords;
$("#geo_data").html('lat: '+location.latitude+'<br />long: '+location.longitude+'<br /> altitude: '+location.altitude+'<br /> accuracy: '+location.accuracy+'<br /> altitude accuracy: '+location.altitudeAccuracy+'<br /> heading: '+location.heading+'<br /> speed: '+location.speed);
}, function() {
alert('มีปัญหาในการตรวจหาตำแหน่ง');
});
} else {
alert('เบราเซอร์นี้ไม่รองรับ geolocation');
}
</script>
</body>
</html>
จากนั้นทดลองเรียกเว็บเพจดูครับ โดยเรียกผ่านทาง web server (เช่น http://localhost) จะดีที่สุดโดยเมื่อเรียกแล้ว ในครั้งแรกเบราเซอร์จะถามถึงการอนุญาต share location ก็ให้เรากดแชร์ไป และก็รอสักพัก ข้อมูลต่างๆจะโผล่ขึ้นมาใต้คำว่าตำแหน่งของฉัน:
หากข้อมูลไม่ขึ้น ก็จะมี alert ขึ้นมาแทน ซึ่งเบราเซอร์รุ่นใหม่ๆจะทดลองได้ผ่านฉลุยไม่มีปัญหา
ตัวอย่างการทำงานจริง
ตำแหน่งของคุณ: