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

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 ขึ้นมาแทน ซึ่งเบราเซอร์รุ่นใหม่ๆจะทดลองได้ผ่านฉลุยไม่มีปัญหา

ตัวอย่างการทำงานจริง

ตำแหน่งของคุณ:

 

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>