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

Michael Mahemoff

เกริ่นนำ

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

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

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

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

// 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>

อีก 2-3 ขั้นตอนต่อไปจะใช้ 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 ไม่ได้ หรือผู้ใช้ได้ปิดใช้งานการค้นหาตำแหน่งไปโดยกะทันหัน อาร์กิวเมนต์ที่สอง (ไม่บังคับ) ถึง 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 ได้รับการปรับเปลี่ยนมาจากสคริปต์ที่มาจากประเภทที่ย้ายได้ ภายใต้ใบอนุญาตครีเอทีฟคอมมอนส์

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;
}