เกริ่นนำ
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;
}