เครื่องวัดระยะทางอย่างง่ายโดยใช้ Geolocation API

Michael Mahemoff

บทนำ

Geolocation API ช่วยให้คุณทราบตําแหน่งของผู้ใช้และติดตามผู้ใช้ขณะที่ผู้ใช้เคลื่อนที่ไปรอบๆ โดยได้รับความยินยอมจากผู้ใช้เสมอ ฟังก์ชันการทำงานนี้อาจเป็นส่วนหนึ่งของการค้นหาของผู้ใช้ เช่น เพื่อนำทางผู้ใช้ไปยังจุดหมาย นอกจากนี้ยังอาจใช้เพื่อ "การติดแท็กตำแหน่ง" เนื้อหาบางอย่างที่ผู้ใช้สร้างขึ้น เช่น เพื่อระบุตำแหน่งที่ถ่ายภาพ API นี้ไม่เกี่ยวข้องกับอุปกรณ์ และไม่สนใจว่าเบราว์เซอร์จะระบุตำแหน่งอย่างไร ตราบใดที่ไคลเอ็นต์สามารถขอและรับข้อมูลตำแหน่งในลักษณะมาตรฐาน กลไกพื้นฐานอาจใช้ GPS, Wi-Fi หรือเพียงแค่ขอให้ผู้ใช้ป้อนตำแหน่งด้วยตนเอง เนื่องจากการค้นหาเหล่านี้จะใช้เวลาสักครู่ API จึงเป็นแบบแอซิงโครนัส คุณจะต้องส่งเมธอดการเรียกกลับทุกครั้งที่ขอตำแหน่ง

ตัวอย่างนี้คือมาตรวัดการเดินทางที่แสดงตําแหน่งเริ่มต้นและแสดงระยะทางที่เดินทางนับตั้งแต่โหลดหน้าเว็บ

ขั้นตอนที่ 1 ตรวจสอบความเข้ากันได้

Browser Support

• 5
• 12
• 3.5
• 5

Source

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

// check for Geolocation support
if (navigator.geolocation) {
  console.log('Geolocation is supported!');
}
else {
  console.log('Geolocation is not supported for this Browser/OS version yet.');
}

ขั้นตอนที่ 2 ประกาศ HTML ของมาตรระยะทาง

ในตัวอย่างนี้ คุณกําลังสร้างมาตรระยะทาง จึงประกาศ HTML ต่อไปนี้

<div id="tripmeter">
<p>
Starting Location (lat, lon):<br/>
<span id="startLat">???</span>°, <span id="startLon">???</span>°
</p>
<p>
Current Location (lat, lon):<br/>
<span id="currentLat">???</span>°, <span id="currentLon">???</span>°
</p>
<p>
Distance from starting location:<br/>
<span id="distance">0</span> km
</p>
</div>

ขั้นตอนถัดไปจะใช้ Geolocation API เพื่อป้อนข้อมูลลงในช่องว่างทั้งหมด

ขั้นตอนที่ 3 ระบุตำแหน่งปัจจุบันของผู้ใช้

getCurrentPosition() จะรายงานตำแหน่งปัจจุบันของผู้ใช้แบบไม่เป็นเชิงเวลา เรียกใช้ทันทีที่หน้าเว็บโหลด เพื่อให้ระบบป้อนข้อมูลตําแหน่งเริ่มต้นอย่างถูกต้องและบันทึกไว้ใช้ภายหลัง

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
});
};

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

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

ขั้นตอนที่ 4 จัดการข้อผิดพลาด

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

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
// same as above
}, function(error) {
alert('Error occurred. Error code: ' + error.code);
// error.code can be:
//   0: unknown error
//   1: permission denied
//   2: position unavailable (error response from locaton provider)
//   3: timed out
});
};

ขั้นตอนที่ 5 ตรวจสอบตำแหน่งของผู้ใช้

การเรียก getCurrentPosition() ก่อนหน้านี้ทํางานเพียงครั้งเดียวเมื่อโหลดหน้าเว็บ หากต้องการติดตามการเปลี่ยนแปลง ให้ใช้ watchPosition() โดยจะแจ้งให้ฟังก์ชันการเรียกกลับทราบโดยอัตโนมัติทุกครั้งที่ผู้ใช้ย้าย

navigator.geolocation.watchPosition(function(position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});

ขั้นตอนที่ 6 แสดงระยะทางที่เดินทาง

ขั้นตอนนี้ไม่ได้เกี่ยวข้องกับ Geolocation API โดยตรง แต่เป็นการสรุปการสาธิตและแสดงตัวอย่างวิธีที่คุณอาจใช้ข้อมูลตำแหน่ง เพิ่มบรรทัดพิเศษลงในตัวแฮนเดิล watchPosition() เพื่อป้อนข้อมูลระยะทางที่เดินทาง

navigator.geolocation.watchPosition(function(position) {
// same as above
document.getElementById('distance').innerHTML =
    calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
                    position.coords.latitude, position.coords.longitude);
});

ฟังก์ชัน calculateDistance() จะใช้อัลกอริทึมเชิงเรขาคณิตเพื่อหาระยะทางระหว่างพิกัด 2 รายการ การใช้งาน JavaScript ดัดแปลงมาจากสคริปต์ที่ Moveable Type ให้มาภายใต้สัญญาอนุญาตครีเอทีฟคอมมอนส์

function calculateDistance(lat1, lon1, lat2, lon2) {
var R = 6371; // km
var dLat = (lat2 - lat1).toRad();
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
}
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}