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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
R - ปรับให้ Product ใน JoomShopping อัพรูปภาพตามสีได้
โดย tsukasaz ศ 25 พฤษภาคม 2018 5:49 pm บอร์ด Doy-shop ( 15 พ.ค. - 29 พ.ค. 61)
0
3
ศ 25 พฤษภาคม 2018 5:49 pm โดย tsukasaz
B - ไม่สามารถ Import Serial Outgoing ได้ครับ [2018-05][004]
โดย AePongsak ศ 25 พฤษภาคม 2018 4:58 pm บอร์ด อาร์ซีพี โกลบอล จำกัด - Tester
1
11
ศ 25 พฤษภาคม 2018 6:33 pm โดย nuattawoot
เข้าใช้ไม่ได้ค่ะ [2018-05][003]
โดย Rujikon ศ 25 พฤษภาคม 2018 4:36 pm บอร์ด บวรเวชสมุนไพรไทย จำกัด - Tester
0
3
ศ 25 พฤษภาคม 2018 4:36 pm โดย Rujikon
Q - ทำรูปภาพให้สามารถเปลี่ยนสีได้ตามต้องการ
โดย Parichat ศ 25 พฤษภาคม 2018 4:04 pm บอร์ด Joomla Dev
12
33
ศ 25 พฤษภาคม 2018 6:20 pm โดย Parichat
Q - ย่อสินค้าให้เท่ากับพื้นหลัง
โดย Parichat ศ 25 พฤษภาคม 2018 3:40 pm บอร์ด Joomla Dev
16
36
ศ 25 พฤษภาคม 2018 6:15 pm โดย Parichat
Q - ใน Joomshopping ในหน้าเว็บเอา Order by กับ Display ออก
โดย Parichat ศ 25 พฤษภาคม 2018 3:04 pm บอร์ด Joomla Development
2
11
ศ 25 พฤษภาคม 2018 3:21 pm โดย Parichat
B - การใช้งาน Logged calls
โดย watcharin ศ 25 พฤษภาคม 2018 2:37 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
4
ศ 25 พฤษภาคม 2018 2:37 pm โดย watcharin
Q - จัดพื้นหลังให้เท่ากับเมนูด้านบน
โดย Parichat ศ 25 พฤษภาคม 2018 2:20 pm บอร์ด HTML CSS
1
12
ศ 25 พฤษภาคม 2018 2:50 pm โดย Parichat
B - ภาษีต้องเพิ่ม จากราคา
โดย thatsawan ศ 25 พฤษภาคม 2018 1:26 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
1
3
ศ 25 พฤษภาคม 2018 1:27 pm โดย thatsawan
Work's on Hand ปาริชาติ รัตโณภาส MT21
โดย Parichat จ 08 ม.ค. 2018 12:11 pm บอร์ด M061 - ปาริชาติ รัตโณภาส
19
1
ศ 25 พฤษภาคม 2018 4:26 pm โดย Parichat
งานประจำวันที่ 25 พฤษภาคม 2561
โดย Rujikon ศ 25 พฤษภาคม 2018 11:46 am บอร์ด M060 - นายรุจิกร พงษ์พิละ
2
8
ศ 25 พฤษภาคม 2018 8:06 pm โดย nuattawoot
B - ไม่สามารถเข้าไปดูรายละเอียดของ Customer ได้
โดย watcharin ศ 25 พฤษภาคม 2018 11:44 am บอร์ด M.D.Soft Co.,Ltd. - Tester
0
6
ศ 25 พฤษภาคม 2018 11:44 am โดย watcharin
Q - ต้องการให้ Python GUI( Tkinter ) เก็บ Path ที่ได้จากการ Browse
โดย rangsan ศ 25 พฤษภาคม 2018 11:32 am บอร์ด Programming - C/C++ & java & Python
4
23
ศ 25 พฤษภาคม 2018 3:40 pm โดย nuattawoot
Q - สร้างเทมเพลตใน Joomla แต่ไม่ขึ้นไฟล์ให้ติดตั้ง
โดย Parichat ศ 25 พฤษภาคม 2018 11:11 am บอร์ด Joomla Development
3
11
ศ 25 พฤษภาคม 2018 11:35 am โดย Parichat
งานประจำวันที่ 25 พฤษภาคม 2561
โดย Parichat ศ 25 พฤษภาคม 2018 10:45 am บอร์ด M061 - ปาริชาติ รัตโณภาส
2
4
ศ 25 พฤษภาคม 2018 7:25 pm โดย Parichat
งานประจำวันที่ 25 พฤษภาคม 2561
โดย rangsan ศ 25 พฤษภาคม 2018 10:45 am บอร์ด M058 - รังสรรค์ มุ่งกลาง
1
2
ศ 25 พฤษภาคม 2018 6:58 pm โดย rangsan
B - แก้ไขชื่อบริษัทไม่ได้ error
โดย thatsawan พฤ 24 พฤษภาคม 2018 6:21 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
1
พฤ 24 พฤษภาคม 2018 6:21 pm โดย thatsawan
G - ทดสอบระบบจริง เพิ่มลูกค้า สร้างใบเสนอราคา สร้าง inv รับชำระ ผ่าน
โดย thatsawan พฤ 24 พฤษภาคม 2018 6:17 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
6
พฤ 24 พฤษภาคม 2018 6:17 pm โดย thatsawan
Q - login เข้าหน้า admin ไม่ได้
โดย Parichat พฤ 24 พฤษภาคม 2018 6:03 pm บอร์ด Joomla Development
16
51
พฤ 24 พฤษภาคม 2018 11:24 pm โดย Parichat
Q - เลขรันเอกสารที่จะต้องใช้ในบริษัท
โดย thatsawan พฤ 24 พฤษภาคม 2018 5:16 pm บอร์ด M.D.Soft Co.,Ltd. (Main)
1
6
ศ 25 พฤษภาคม 2018 11:33 am โดย kanchanok