Geolocation API ในคอมโพเนนต์ React

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) ใช้ขอตำแหน่งของอุปกรณ์หนึ่งครั้ง ฟังก์ชันเรียกกลับเมื่อสำเร็จจะได้รับออบเจ็กต์ GeolocationPosition วิธีนี้เหมาะเมื่อคุณต้องการตำแหน่งเพียงครั้งเดียว เช่น ค้นหาร้านค้าที่ใกล้ที่สุดเมื่อผู้ใช้คลิกปุ่ม แทนที่จะติดตามการเคลื่อนไหวอย่างต่อเนื่อง

navigator.geolocation.watchPosition(successCallback, errorCallback, options) จะเรียกฟังก์ชันเรียกกลับอย่างต่อเนื่องทุกครั้งที่ตำแหน่งของอุปกรณ์เปลี่ยนแปลง และคืนค่าตัวเลข watchId วิธีนี้เหมาะสำหรับกรณีใช้งานแบบเรียลไทม์ เช่น การติดตามการจัดส่งหรือการนำทางแบบเลี้ยวต่อเลี้ยว ซึ่งจำเป็นต้องมีตำแหน่งที่เป็นปัจจุบันอยู่เสมอ

ออบเจ็กต์ GeolocationPosition มีพร็อพเพอร์ตี coords ซึ่งประกอบด้วย latitude, longitude และ accuracy (หน่วยเป็นเมตร) ฟิลด์เสริมที่ไม่จำเป็น ได้แก่ altitude, altitudeAccuracy, heading และ speed ฟิลด์ timestamp จะบันทึกเวลาที่เก็บตำแหน่งนั้น

ฟังก์ชันเรียกกลับเมื่อเกิดข้อผิดพลาดจะได้รับ GeolocationPositionError ซึ่งมีพร็อพเพอร์ตี code เป็นตัวเลข รหัส 1 คือ PERMISSION_DENIED (ผู้ใช้ปฏิเสธ) รหัส 2 คือ POSITION_UNAVAILABLE (ฮาร์ดแวร์หรือเครือข่ายขัดข้อง) และรหัส 3 คือ TIMEOUT (คำขอใช้เวลานานเกินไป) ให้จัดการทั้งสามกรณีเสมอ

ตัวรับฟัง watchPosition จะทำงานต่อไปไม่สิ้นสุดจนกว่าคุณจะหยุด ใน useEffect ให้คืนค่าฟังก์ชันล้างข้อมูลที่เรียกใช้ navigator.geolocation.clearWatch(watchId) หากลืมล้างข้อมูล ตัวติดตามจะยังทำงานต่อหลังจากถอดคอมโพเนนต์ออก ส่งผลให้แบตเตอรี่หมดเร็วและอาจพยายามอัปเดตสถานะของคอมโพเนนต์ที่ถูกถอดออกแล้ว

ฮุก useGeolocation จัดการสถานะด้วยค่าที่เป็นไปได้สี่ค่า ได้แก่ idle (ยังไม่ได้ขอ), loading (กำลังดำเนินการขอ), success (ได้รับตำแหน่งแล้ว) และ error (ล้มเหลว) นอกจากนี้ยังเก็บ position และ errorMessage ไว้ในสถานะด้วย คอมโพเนนต์จึงได้รับอินเทอร์เฟซที่สะอาดและสอดคล้องกัน

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

เช่นเดียวกับ API ของเบราว์เซอร์ที่มีสิทธิ์สูงส่วนใหญ่ การระบุตำแหน่งจะใช้ได้เฉพาะในบริบทที่ปลอดภัย navigator.geolocation จะเป็น undefined บนหน้าที่ใช้ HTTP ธรรมดา ระหว่างพัฒนาบน localhost จะยังใช้งานได้โดยไม่ต้องใช้ HTTPS แต่ในสภาพแวดล้อมจริง ให้ตรวจสอบเสมอว่าแอปให้บริการผ่าน HTTPS มิฉะนั้นผู้ใช้จะไม่เห็นคำขอสิทธิ์

อาร์กิวเมนต์ตัวที่สามซึ่งเป็นตัวเลือกของ getCurrentPosition และ watchPosition รับออบเจ็กต์ตัวเลือก enableHighAccuracy: true จะขอความแม่นยำระดับ GPS โดยแลกกับการใช้พลังงานที่มากขึ้น timeout กำหนดจำนวนมิลลิวินาทีสูงสุดที่จะรอ ส่วน maximumAge อนุญาตให้ใช้ตำแหน่งที่เก็บไว้ในแคช หากตำแหน่งนั้นถูกบันทึกไว้ภายในจำนวนมิลลิวินาทีที่กำหนด

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

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

รหัส GeolocationPositionError ที่มีค่า 1 หมายความว่าอย่างไร

ใช้ getCurrentPosition สำหรับการอ่านตำแหน่งครั้งเดียว และใช้ watchPosition สำหรับการติดตามอย่างต่อเนื่อง เรียกใช้ clearWatch ในฟังก์ชันล้างข้อมูลของ useEffect เสมอ สร้างฮุก useGeolocation ที่มีสถานะว่าง กำลังโหลด สำเร็จ และข้อผิดพลาด จัดการกรณีผู้ใช้ปฏิเสธสิทธิ์อย่างเหมาะสม และจำไว้ว่าการระบุตำแหน่งในสภาพแวดล้อมจริงต้องใช้ HTTPS