ให้เรตสมาชิก: 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
MOD_MTB_NEWS_RECENT
ทำความรู้จักไวรัส Trojan และวิธีป้องกัน
โดย บัวบุญ จันทะโคตร จ 26 มิ.ย. 2017 3:45 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
1
จ 26 มิ.ย. 2017 3:45 pm โดย บัวบุญ จันทะโคตร
งานประจำวันที่ 26 มิถุนายน 2560
โดย Ik Kat จ 26 มิ.ย. 2017 2:46 pm บอร์ด MT19 - ปวีณา จันดี
1
5
จ 26 มิ.ย. 2017 2:46 pm โดย Ik Kat
การตัดต่อ VIdeo python ใช้ module ตัวไหนกันมั้งคับ
โดย nuattawoot จ 26 มิ.ย. 2017 2:31 pm บอร์ด Programming - C/C++ & java & Python
3
13
จ 26 มิ.ย. 2017 2:31 pm โดย nuattawoot
เข้าเฟสเก่าไม่ได้
โดย อั่งเปา จ 26 มิ.ย. 2017 12:56 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
10
จ 26 มิ.ย. 2017 12:56 pm โดย อั่งเปา
รวมงานประจำปี 2560
โดย bellzeed จ 26 มิ.ย. 2017 11:37 am บอร์ด M047 - วิศรุต เรืองอุไร
0
1
จ 26 มิ.ย. 2017 11:37 am โดย bellzeed
note
โดย บัวบุญ จันทะโคตร จ 26 มิ.ย. 2017 11:36 am บอร์ด M048 - บัวบัญ จันทะโครต
0
5
จ 26 มิ.ย. 2017 11:36 am โดย บัวบุญ จันทะโคตร
รวมงานประจำปี 2560
โดย Before Dong จ 26 มิ.ย. 2017 11:36 am บอร์ด M046 - อนวัช พริบไหว
0
2
จ 26 มิ.ย. 2017 11:36 am โดย Before Dong
รวมบทความ ปี 2560
โดย Before Dong จ 26 มิ.ย. 2017 11:36 am บอร์ด M046 - อนวัช พริบไหว
0
2
จ 26 มิ.ย. 2017 11:36 am โดย Before Dong
Work's on Hand วิศรุต เรืองอุไร M047
โดย bellzeed จ 26 มิ.ย. 2017 11:35 am บอร์ด M047 - วิศรุต เรืองอุไร
0
4
จ 26 มิ.ย. 2017 11:35 am โดย bellzeed
Note
โดย Before Dong จ 26 มิ.ย. 2017 11:35 am บอร์ด M046 - อนวัช พริบไหว
0
1
จ 26 มิ.ย. 2017 11:35 am โดย Before Dong
Work's on Hand บัวบุญ จันทะโคตร M048
โดย บัวบุญ จันทะโคตร จ 26 มิ.ย. 2017 11:35 am บอร์ด M048 - บัวบัญ จันทะโครต
0
4
จ 26 มิ.ย. 2017 11:35 am โดย บัวบุญ จันทะโคตร
Work's on Hand อนวัช พริบไหว md046
โดย Before Dong จ 26 มิ.ย. 2017 11:28 am บอร์ด M046 - อนวัช พริบไหว
0
4
จ 26 มิ.ย. 2017 11:28 am โดย Before Dong
งานประจำวันที่ 26 June 17
โดย bellzeed จ 26 มิ.ย. 2017 11:27 am บอร์ด M047 - วิศรุต เรืองอุไร
1
10
จ 26 มิ.ย. 2017 11:27 am โดย bellzeed
งานประจำวันที่ 26 มิถุนายน 2560
โดย บัวบุญ จันทะโคตร จ 26 มิ.ย. 2017 11:27 am บอร์ด M048 - บัวบัญ จันทะโครต
1
11
จ 26 มิ.ย. 2017 11:27 am โดย บัวบุญ จันทะโคตร
งานประจำวันที่ 26 มิถุนายน 2560
โดย Before Dong จ 26 มิ.ย. 2017 11:26 am บอร์ด M046 - อนวัช พริบไหว
1
12
จ 26 มิ.ย. 2017 11:26 am โดย Before Dong
สอบถาม code เครื่องคิดเลขที่เป็นปุ่มหน่อยคับ
โดย เอกพล ชื่นแย้ม จ 26 มิ.ย. 2017 9:06 am บอร์ด Programming - PHP
0
9
จ 26 มิ.ย. 2017 9:06 am โดย เอกพล ชื่นแย้ม
จะสร้างไฟล์ .csv จากฟรีโปรแกรมอะไรได้บ้างค่ะ (ไม่มี excel)
โดย thatsawan อ 25 มิ.ย. 2017 7:30 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
16
อ 25 มิ.ย. 2017 7:30 pm โดย thatsawan
มีคลิปทำ Xoops ไหมครับ
โดย Thanakorn Lummuangrong อ 25 มิ.ย. 2017 11:20 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
11
อ 25 มิ.ย. 2017 11:20 am โดย mindphp
ขอบคุณ
โดย มามี๊ น้องขอบคุณ ส 24 มิ.ย. 2017 9:32 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
10
ส 24 มิ.ย. 2017 9:32 pm โดย มามี๊ น้องขอบคุณ
Code ของผังบัญชี ความหมายของแต่ละหลักคืออะไร
โดย araxvaan ส 24 มิ.ย. 2017 6:46 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
36
ส 24 มิ.ย. 2017 6:46 pm โดย araxvaan