การที่มีตำแหน่งทางภูมิศาสตร์ HTML5

HTML5 Geolocation (การที่จะทราบสถานที่) ใช้เพื่อที่จะที่จัดทำสถานที่ที่ตั้งของผู้ใช้

ลองด้วยตัวเอง: แสดงสถานที่ของคุณบนแผนที่ของกูเกิล

ที่จัดทำสถานที่ที่ตั้งของผู้ใช้

API HTML5 Geolocation ใช้เพื่อที่จะได้รับสถานที่ที่ตั้งของผู้ใช้

เนื่องจากคุณสมบัตินี้อาจเป็นการละเมิดความเป็นส่วนตัวของผู้ใช้ ดังนั้นข้อมูลสถานที่ของผู้ใช้จะไม่สามารถใช้งานได้เว้นเสียแต่ผู้ใช้ยอม:

การสนับสนุนของเบราเซอร์

Internet Explorer 9、Firefox、Chrome、Safari และ Opera สนับสนุนการที่จะทราบสถานที่

หมายเหตุ:สำหรับอุปกรณ์ที่มี GPS อย่างเช่น iPhone การที่จะทราบสถานที่จะเหมาะสมมากขึ้น

HTML5 - การใช้การที่จะทราบสถานที่

ใช้วิธี getCurrentPosition() ในการที่จะทราบสถานที่ของผู้ใช้:

ตัวอย่างด้านล่างเป็นตัวอย่างของการที่จะทราบสถานที่ที่เรียกด้วยตัวอย่างของสถานที่ที่เรียก

ตัวอย่าง

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation ไม่สนับสนุนโดยบราวเซอร์นี้.";}
  }
function showPosition(position)
  {
  x.innerHTML="จังหวัง: " + position.coords.latitude +
  "<br />จังหวัง: " + position.coords.longitude;
  }
</script>

ลองทดสอบด้วยตัวเอง

ชี้แจงตัวอย่าง:

  • ตรวจสอบว่าสนับสนุนการที่จะทราบสถานที่หรือไม่
  • ถ้าสนับสนุน ก็จะปฏิบัติตามวิธี getCurrentPosition() ถ้าไม่สนับสนุน ก็จะแสดงข้อความแก่ผู้ใช้:
  • ถ้า getCurrentPosition() ทำงานสำเร็จ ก็จะกลับค่าความตรงของจุดสำหรับฟังก์ชัน showPosition() ที่กำหนด:
  • ฟังก์ชัน showPosition() ได้รับและแสดงแบบรูปแบบและเส้นเมริเดียน

ตัวอย่างด้านบนเป็นสคริปต์ภาษาเกี่ยวกับการที่จะทราบสถานที่ที่เพียงพอแบบพื้นฐานและไม่มีการจัดการความผิดพลาด

จัดการความผิดพลาดและปฏิเสธ

ขอบรรทัดแนวที่สองของวิธี getCurrentPosition() ใช้เพื่อจัดการความผิดพลาด。มันกำหนดว่าเมื่อการขอสถานที่ของผู้ใช้ล้มเหลวจะทำอะไร:

ตัวอย่าง

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="ผู้ใช้ปฏิเสธคำขอการที่จะทราบสถานที่"
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="ข้อมูลสถานที่ไม่สามารถใช้งานได้"
      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;
    }
  }

ลองทดสอบด้วยตัวเอง

รหัสข้อผิดพลาด:

  • Permission denied - ผู้ใช้ไม่อนุญาตให้ใช้การที่ตั้งของตัวเอง
  • Position unavailable - ไม่สามารถหาตำแหน่งที่ตั้งของตัวเอง
  • Timeout - การดำเนินการเกินเวลา

แสดงผลในแผนที่

ถ้าต้องการแสดงผลในแผนที่ คุณจะต้องเข้าถึงบริการแผนที่ที่สามารถใช้เรทริงกี้ อย่างเช่น แผนที่กูเกิลหรือแผนที่บาโดว

ตัวอย่าง

function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
}

ลองทดสอบด้วยตัวเอง

ในตัวอย่างดังกล่าว เราใช้ข้อมูลเรทริงกี้ที่กลับมาจากอุณหภูมิและแบนด์เพื่อแสดงตำแหน่งบนแผนที่กูเกิล (โดยใช้ภาพสตาติก)

สคริปต์โฆษณาแผนที่กูเกิล

ลิงก์ด้านบนจะแสดงวิธีที่จะใช้สคริปต์เพื่อแสดงแผนที่ที่มีตัวแทนจุดที่ทำงานได้ และมีตัวเลือกการยึดและย้ายแผนที่

ข้อมูลที่เกี่ยวกับตำแหน่งที่กำหนด

หน้านี้แสดงวิธีที่จะแสดงตำแหน่งผู้ใช้บนแผนที่ อย่างไร แต่ การที่จะหาข้อมูลที่เกี่ยวกับตำแหน่งที่กำหนดนั้นมีความมีประโยชน์อีกด้วย

กรณีที่เป็นตัวอย่าง:

  • ปรับปรุงข้อมูลท้องถิ่น
  • แสดงจุดสนใจในบริเวณที่ผู้ใช้อยู่
  • ระบบนำทางทางรถยนต์ที่มีปฏิสัมพันธ์ (GPS)

วิธี getCurrentPosition() - กลับค่าข้อมูล

ถ้าประสบความสำเร็จ วิธี getCurrentPosition() จะกลับค่าตัวแปรที่มีความถึงถึง latitude, longitude และ accuracy คุณสมบัติ。ถ้าใช้ได้ จะกลับค่าตัวแปรของคุณสมบัติด้านล่าง

คุณสมบัติ คำอธิบาย
coords.latitude coords.latitude
coords.longitude อุณหภูมิที่เป็นเลขเศษ
coords.accuracy ความเห็นเพิ่มเติม
coords.altitude ความสูงจากน้ำทะเล นับเป็นเมตร
coords.altitudeAccuracy ความเร็วของตำแหน่งที่ตั้งที่อยู่ที่ระดับน้ำทะเล
coords.heading ทิศทาง นับจากทิศเหนือตรงข้าม
coords.speed ความเร็ว ระบุด้วยเมตร/วินาที
timestamp วัน/เวลาที่ตอบ

Geolocation องค์ประกอบ - วิธีการที่มีความสนใจอื่นๆ

watchPosition() - คืนค่าตำแหน่งที่ตั้งของผู้ใช้ และต่อมาคืนค่าการปรับปรุงตำแหน่งที่ตั้งของผู้ใช้ที่เคลื่อนที่ (เช่น GPS บนรถยนต์)

clearWatch() - หยุดการใช้งานฟังก์ชัน watchPosition()

ตัวอย่างด้านล่างนี้แสดงวิธีการใช้งานฟังก์ชัน watchPosition() คุณจำเป็นต้องมีอุปกรณ์ GPS ที่มีความเที่ยงทันที (เช่น iPhone) เพื่อทดสอบตัวอย่างนี้:

ตัวอย่าง

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="Geolocation ไม่สนับสนุนโดยบราวเซอร์นี้.";}
  }
function showPosition(position)
  {
  x.innerHTML="จังหวัง: " + position.coords.latitude +
  "<br />จังหวัง: " + position.coords.longitude;
  }
</script>

ลองทดสอบด้วยตัวเอง