หาตำแหน่งของคุณด้วย geolocation ใน html5

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 พารามิเตอร์ด้วยกัน คือ

  1. ฟังก์ชั่นเมื่อขอตำแหน่งสำเร็จ
  2. ฟังก์ชั่นเมื่อขอตำแหน่งไม่สำเร็จ
  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

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *

คุณอาจใช้แท็กHTMLและแอททริบิวต์เหล่านี้: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>