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

HTML5 Geolocation API ช่วยให้คุณสามารถแบ่งปันตำแหน่งของคุณกับเว็บไซต์โปรดของคุณ JavaScript สามารถจับละติจูดและลองจิจูดของคุณและสามารถส่งไปยังเว็บเซิร์ฟเวอร์แบ็กเอนด์และทำสิ่งต่างๆเช่นการค้นหาธุรกิจในท้องถิ่นหรือแสดงตำแหน่งของคุณบนแผนที่

ปัจจุบันเบราว์เซอร์และโทรศัพท์มือถือส่วนใหญ่รองรับ Geolocation API geolocation API ทำงานกับคุณสมบัติใหม่ของ global navigator object คือ Geolocation object ซึ่งสามารถสร้างได้ดังนี้ -

var geolocation = navigator.geolocation;

วัตถุตำแหน่งทางภูมิศาสตร์เป็นวัตถุบริการที่อนุญาตให้วิดเจ็ตดึงข้อมูลเกี่ยวกับตำแหน่งทางภูมิศาสตร์ของอุปกรณ์

วิธีการระบุตำแหน่งทางภูมิศาสตร์

วัตถุตำแหน่งทางภูมิศาสตร์มีวิธีการดังต่อไปนี้ -

ซีเนียร์	วิธีการและคำอธิบาย
1	getCurrentPosition () วิธีนี้จะดึงตำแหน่งทางภูมิศาสตร์ปัจจุบันของผู้ใช้
2	watchPosition () วิธีนี้จะดึงข้อมูลอัปเดตเป็นระยะ ๆ เกี่ยวกับตำแหน่งทางภูมิศาสตร์ปัจจุบันของอุปกรณ์
3	clearWatch () วิธีนี้จะยกเลิกการโทร watchPosition ที่กำลังดำเนินอยู่

ตัวอย่าง

ต่อไปนี้เป็นโค้ดตัวอย่างเพื่อใช้วิธีการใด ๆ ข้างต้น -

function getLocation() {
   var geolocation = navigator.geolocation;
   geolocation.getCurrentPosition(showLocation, errorHandler);
}

ที่นี่ showLocation และ errorHandler เป็นวิธีการโทรกลับซึ่งจะใช้เพื่อรับตำแหน่งจริงตามที่อธิบายไว้ในส่วนถัดไปและเพื่อจัดการข้อผิดพลาดหากมี

คุณสมบัติที่ตั้ง

วิธีการระบุตำแหน่งทางภูมิศาสตร์ getCurrentPosition () และ getPositionUsingMethodName () ระบุวิธีการเรียกกลับที่ดึงข้อมูลตำแหน่ง วิธีการเหล่านี้เรียกว่าอะซิงโครนัสกับวัตถุPosition ซึ่งเก็บข้อมูลตำแหน่งที่สมบูรณ์

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

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

ทรัพย์สิน	ประเภท	คำอธิบาย
coords	วัตถุ	ระบุตำแหน่งทางภูมิศาสตร์ของอุปกรณ์ ตำแหน่งจะแสดงเป็นชุดพิกัดทางภูมิศาสตร์พร้อมกับข้อมูลเกี่ยวกับหัวเรื่องและความเร็ว
coords.latitude	จำนวน	ระบุค่าประมาณละติจูดเป็นองศาทศนิยม ช่วงค่าคือ [-90.00, +90.00]
coords. ลองจิจูด	จำนวน	ระบุค่าประมาณลองจิจูดเป็นองศาทศนิยม ช่วงค่าคือ [-180.00, +180.00]
coords.altitude	จำนวน	[ไม่บังคับ] ระบุระดับความสูงโดยประมาณเป็นเมตรเหนือวงรี WGS 84
coords ความถูกต้อง	จำนวน	[ไม่บังคับ] ระบุความแม่นยำของการประมาณละติจูดและลองจิจูดเป็นเมตร
coords.altitudeAccuracy	จำนวน	[ไม่บังคับ] ระบุความแม่นยำของการประมาณระดับความสูงเป็นเมตร
coords.heading	จำนวน	[ไม่บังคับ] ระบุทิศทางการเคลื่อนที่ปัจจุบันของอุปกรณ์เป็นองศานับตามเข็มนาฬิกาเทียบกับทิศเหนือจริง
coords.speed	จำนวน	[ไม่บังคับ] ระบุความเร็วพื้นปัจจุบันของอุปกรณ์เป็นเมตรต่อวินาที
การประทับเวลา	วันที่	ระบุเวลาที่ดึงข้อมูลตำแหน่งและอ็อบเจ็กต์ Position ที่สร้างขึ้น

ตัวอย่าง

ต่อไปนี้เป็นโค้ดตัวอย่างที่ใช้ประโยชน์จากออบเจ็กต์ Position วิธี showLocation เป็นวิธีการโทรกลับ -

function showLocation( position ) {
   var latitude = position.coords.latitude;
   var longitude = position.coords.longitude;
   ...
}

การจัดการข้อผิดพลาด

ตำแหน่งทางภูมิศาสตร์มีความซับซ้อนและจำเป็นอย่างมากที่จะต้องจับข้อผิดพลาดและจัดการกับมันอย่างสง่างาม

เมธอด geolocations getCurrentPosition () และ watchPosition () ใช้ประโยชน์จากวิธีการโทรกลับของตัวจัดการข้อผิดพลาดซึ่งให้ PositionErrorวัตถุ. วัตถุนี้มีคุณสมบัติสองประการดังต่อไปนี้ -

ทรัพย์สิน	ประเภท	คำอธิบาย
รหัส	จำนวน	มีรหัสตัวเลขสำหรับข้อผิดพลาด
ข้อความ	สตริง	มีคำอธิบายข้อผิดพลาดที่มนุษย์อ่านได้

ตารางต่อไปนี้อธิบายรหัสข้อผิดพลาดที่เป็นไปได้ที่ส่งคืนในวัตถุ PositionError

รหัส	คงที่	คำอธิบาย
0	ข้อผิดพลาดที่ไม่รู้จัก	วิธีการเรียกข้อมูลตำแหน่งของอุปกรณ์ล้มเหลวเนื่องจากข้อผิดพลาดที่ไม่รู้จัก
1	PERMISSION_DENIED	วิธีการดึงข้อมูลตำแหน่งของอุปกรณ์ไม่สำเร็จเนื่องจากแอปพลิเคชันไม่มีสิทธิ์ในการใช้บริการตำแหน่ง
2	POSITION_UNAVAILABLE	ไม่สามารถระบุตำแหน่งของอุปกรณ์ได้
3	หมดเวลา	เมธอดไม่สามารถดึงข้อมูลตำแหน่งภายในช่วงระยะหมดเวลาสูงสุดที่ระบุ

ตัวอย่าง

ต่อไปนี้เป็นโค้ดตัวอย่างที่ใช้ออบเจ็กต์ PositionError นี่คือวิธี errorHandler เป็นวิธีการโทรกลับ -

function errorHandler( err ) {
   
   if (err.code == 1) {
      
      // access is denied
   }
   ...
}

ตัวเลือกตำแหน่ง

ต่อไปนี้เป็นไวยากรณ์จริงของเมธอด getCurrentPosition () -

getCurrentPosition(callback, ErrorCallback, options)

นี่คืออาร์กิวเมนต์ที่สามคือ PositionOptions วัตถุซึ่งระบุชุดตัวเลือกสำหรับการดึงตำแหน่งทางภูมิศาสตร์ของอุปกรณ์

ต่อไปนี้เป็นตัวเลือกที่สามารถระบุเป็นอาร์กิวเมนต์ที่สาม -

ทรัพย์สิน	ประเภท	คำอธิบาย
enableHighAccuracy	บูลีน	ระบุว่าวิดเจ็ตต้องการรับการประมาณตำแหน่งที่แม่นยำที่สุดเท่าที่จะเป็นไปได้หรือไม่ โดยค่าเริ่มต้นนี่เป็นเท็จ
หมดเวลา	จำนวน	คุณสมบัติการหมดเวลาคือจำนวนมิลลิวินาทีที่เว็บแอปพลิเคชันของคุณยินดีที่จะรอตำแหน่ง
maximumAge	จำนวน	ระบุเวลาหมดอายุเป็นมิลลิวินาทีสำหรับข้อมูลตำแหน่งที่แคช

ตัวอย่าง

ต่อไปนี้เป็นโค้ดตัวอย่างที่แสดงวิธีใช้วิธีการดังกล่าวข้างต้น -

function getLocation() {
   var geolocation = navigator.geolocation;
   geolocation.getCurrentPosition(showLocation, errorHandler, {maximumAge: 75000});
}