Geolocation API (Web Geolocation API)
«API مکان یابی (Geolocation API)» موقعیت جغرافیایی کاربر را می دهد. با اجازه کاربر، می توان عرض و طول جغرافیایی را گرفت و نمایش داد.
شروع کار با API مکان یابی
اول بررسی می کنیم پشتیبانی وجود دارد؛ بعد موقعیت را می گیریم.
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
نکته: برای امنیت، مرورگر فقط پس از تأیید کاربر موقعیت را می دهد.
مدیریت خطاها و رد درخواست
با پارامتر دوم getCurrentPosition() خطاها را مدیریت کن.
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation.";
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable.";
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out.";
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred.";
break;
}
}
ردیابی زنده با watchPosition()
برای به روزرسانی پیوسته موقعیت، از «واچ پوزیشن» استفاده کن.
const x2 = document.getElementById("demo");
function getLocationLive() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPositionLive);
} else {
x2.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPositionLive(position) {
x2.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
نکته: Geolocation فقط روی HTTPS کار می کند. روی HTTP غیرفعال است.
گام های عملی
- اجازه کاربر را با
getCurrentPosition()بگیر. - از
position.coordsعرض و طول را بخوان. - پیام خطاها را با
showErrorنمایش بده. - برای ردیابی زنده،
watchPosition()را صدا بزن.
برای درخواست ها از سرور، Fetch API را ببین. برای کارهای پس زمینه، Web Worker API مفید است. مرجع این صفحه: API مکان یابی.
جمع بندی سریع
- API مکان یابی نیاز به اجازه کاربر دارد.
getCurrentPosition()یک بار موقعیت می دهد.watchPosition()موقعیت را پیوسته به روز می کند.- HTTPS الزامی است؛ خطاها را نمایش بده.