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

ตำแหน่งผู้ใช้

API การตำแหน่งที่ตั้ง HTML5 ใช้เพื่อหาตำแหน่งที่ตั้งของผู้ใช้

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

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

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() ทำงานเรียบร้อย มันจะกลับค่าของ coordinates แก่ฟังก์ชันที่กำหนดโดยตัวแปร 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 - การดำเนินการเกินเวลา

แสดงผลลัพธ์ในแผนที่

ถ้าต้องการแสดงผลลัพธ์ในแผนที่ คุณจะต้องเข้าถึงบริการแผนที่ที่สามารถใช้ละติจูดและบริเวณ อย่างเช่น Google Maps หรือ Baidu Maps:

ตัวอย่าง

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+"' />";
}

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

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

สคริปต์ของ Google Maps

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

ข้อมูลของตำแหน่งที่กำหนด

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

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

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

getCurrentPosition() มีการกลับค่า - ข้อมูลที่กลับค่า

ถ้าประสบความสำเร็จ ในกรณีที่ getCurrentPosition() มีการกลับค่าเป็นอ็อบเจ็กท์ จะมีการกลับค่า latitude, longitude และ accuracy ตลอดเวลา หากมีความสามารถ จะมีการกลับค่าอื่นๆ ตามไปด้วย

คุณสมบัติ คำอธิบาย
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>

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