ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
งานประจำวันที่ 24 มิถุนายน 2562
โดย jamepiyawat จ 24 มิ.ย. 2019 10:03 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
0
1
จ 24 มิ.ย. 2019 10:03 am โดย jamepiyawat
งานประจำวันที่ 24 มิถุนายน 2562
โดย EyePornnipa จ 24 มิ.ย. 2019 10:02 am บอร์ด M089 - นางสาวพรนิภา ราชธานี
0
2
จ 24 มิ.ย. 2019 10:02 am โดย EyePornnipa
งานประจำวันที่ 24 มิถุนายน 2562
โดย chatee supasand จ 24 มิ.ย. 2019 9:57 am บอร์ด MT33 - นายชาตรี สุภาแสน
0
1
จ 24 มิ.ย. 2019 9:57 am โดย chatee supasand
งานประจำวันที่ 24 มิถุนายน 2562
โดย jirawoot จ 24 มิ.ย. 2019 9:56 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
0
3
จ 24 มิ.ย. 2019 9:56 am โดย jirawoot
multipart/form-data ใช่กับโทรศัพท์ oppo ไม่ได้
โดย apinanrun อ 23 มิ.ย. 2019 10:56 am บอร์ด Programming - PHP
5
26
อ 23 มิ.ย. 2019 6:57 pm โดย mindphp
สิทธิประกันสังคมกรณีเจ็บป่วยที่คนทำงานควรรู้
โดย EyePornnipa ส 22 มิ.ย. 2019 7:49 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
21
ส 22 มิ.ย. 2019 7:49 pm โดย EyePornnipa
VDO-การเดินทางจากกรุงเทพไปสระบุรี
โดย jirawoot ส 22 มิ.ย. 2019 7:01 pm บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
0
6
ส 22 มิ.ย. 2019 7:01 pm โดย jirawoot
Work Shop VDO การตรวจสอบบัญชี กับโปรแกรมคอมพิวเตอร์ที่จำเป็น
โดย EyePornnipa ส 22 มิ.ย. 2019 6:53 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
0
15
ส 22 มิ.ย. 2019 6:53 pm โดย EyePornnipa
Kano Computer Kit Touch คือ อะไร
โดย jirawoot ส 22 มิ.ย. 2019 5:34 pm บอร์ด Share Knowledge
0
17
ส 22 มิ.ย. 2019 5:34 pm โดย jirawoot
Rate อัตราดอกเบี้ยของแต่ล่ะธนาคาร
โดย Patipat ส 22 มิ.ย. 2019 5:08 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
24
ส 22 มิ.ย. 2019 5:08 pm โดย Patipat
iConn คืออะไร
โดย jirawoot ส 22 มิ.ย. 2019 3:53 pm บอร์ด Share Knowledge
0
20
ส 22 มิ.ย. 2019 3:53 pm โดย jirawoot
mod_rewrite คืออะไร สรุปคร่าวๆ
โดย Patipat ส 22 มิ.ย. 2019 3:23 pm บอร์ด PHP Knowledge
0
19
ส 22 มิ.ย. 2019 3:23 pm โดย Patipat
อาเรย์คืออะไร
โดย jamepiyawat ส 22 มิ.ย. 2019 3:18 pm บอร์ด PHP Knowledge
0
17
ส 22 มิ.ย. 2019 3:18 pm โดย jamepiyawat
วิธีการทำให้ภาษา php เข้าไปเก็บข้อมูลและแสดงข้อมูลเฉพาะที่เราต้องการ
โดย jamepiyawat ส 22 มิ.ย. 2019 12:14 pm บอร์ด PHP Knowledge
0
20
ส 22 มิ.ย. 2019 12:14 pm โดย jamepiyawat
งานประจำวันที่ 22 มิถุนายน 2562
โดย Patipat ส 22 มิ.ย. 2019 10:46 am บอร์ด M088 - ปฏิภัทร สารธรรม
3
18
ส 22 มิ.ย. 2019 6:01 pm โดย Patipat
งานประจำวันที่ 22 มิถุนายน 2562
โดย jamepiyawat ส 22 มิ.ย. 2019 10:09 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
2
10
ส 22 มิ.ย. 2019 7:19 pm โดย jamepiyawat
งานประจำวันที่ 22 มิถุนายน 2562
โดย jirawoot ส 22 มิ.ย. 2019 10:05 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
2
20
ส 22 มิ.ย. 2019 5:10 pm โดย Ittichai_chupol
งานประจำวันที่ 22 มิถุนายน 2562
โดย EyePornnipa ส 22 มิ.ย. 2019 10:02 am บอร์ด M089 - นางสาวพรนิภา ราชธานี
2
45
ส 22 มิ.ย. 2019 7:50 pm โดย EyePornnipa
วิธีการใช้ loop for แสดงข้อมูลที่อยู่ในอาเรย์ออกมาทั้งหมดออกให้ได้เห็นกัน
โดย jamepiyawat ศ 21 มิ.ย. 2019 6:34 pm บอร์ด PHP Knowledge
0
22
ศ 21 มิ.ย. 2019 6:34 pm โดย jamepiyawat
เรียนรู้งานบริการของบริษัท
โดย EyePornnipa ศ 21 มิ.ย. 2019 6:17 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
0
10
ศ 21 มิ.ย. 2019 6:17 pm โดย EyePornnipa