บทที่ 14 HTML5 Geolocation ตอนที่ 1
geolocation คือการระบุพิกัด latitude, longitude ที่เราอยู่ด้วยคำสั่งJavaScript ที่มาใหม่กับ HTML5
การระบุพิกัดนี้ ความแม่นยำขึ้นอยู่กับอุปกรณ์ที่ใช้เปิดเว็บไซต์ เช่น โทรศัพท์มือถืออย่าง Android, iphone จะมี gps ให้ใช้ และ gps นี้จะช่วยให้ระบุพิกัดได้อย่างแม่นยำมากๆ
Geolocation นั้นสนับสนุนแทบทุกบราวเซอร์ ไม่ว่าจะเป็น Internet Explorer 9, Firefox, Chrome, Safari และ Opera
1. ตัวอย่าง การแสดงพิกัดแบบ latitude และ longitude
<html>
<body>
<p id="demo">หาตำแหน่งของฉัน</p>
<button onclick="getLocation()">คลิก</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{ if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); }
else{x.innerHTML="Geolocation is not supported by this browser.";} }function showPosition(position)
{ x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; }
</script>
</body>
</html>ผลลัพธ์คือ
***โค๊ด HTML5 ในการหาพิกัดตามตัวอย่างข้างบนนี้ สามารถใช้หาพิกัด latitude และ longitude โดยเมื่อเรียกแล้ว ในครั้งแรกเบราเซอร์จะถามถึงการอนุญาต share location ก็ให้เรากดแชร์ไป และก็รอสักพัก ข้อมูลต่างๆจะโผล่ขึ้นมาใต้คำว่าตำแหน่งของฉัน:
2.ตัวอย่าง ในกรณีที่เราต้องการแสดงค่าError หากไม่สามารถหาพิกัดได้ <โดยเติมโค๊ด function showError(error)>
<html>
<body>
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{ if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError); }
else{x.innerHTML="Geolocation is not supported by this browser.";} }
function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude; }
function showError(error)
{ switch(error.code) { case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break; case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break; case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break; case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred." break; } }
</script>
</body>
</html> จากตัวอย่างข้างบนเป็นโค๊ดสำหรับแสดงค่า error ซึ่งจะแสดงให้เห็นค่า error ก็ต่อเมื่อไม่สามารถหาพิกัดได้เท่านั้น
อ่านเพิ่มเติม
บทที่ 14 HTML5 Geolocation คือเทคโนโลยีที่ช่วยหาพิกัด ตอนที่ 2
