Geolocation API در جاوا اسکریپت — راهنمای مقدماتی

۳۵۶ بازدید

آخرین به‌روزرسانی: ۰۷ شهریور ۱۴۰۲

زمان مطالعه: ۲ دقیقه

Geolocation API در جاوا اسکریپت — راهنمای مقدماتی

در این مقاله به بررسی یک روش ساده برای به دست آوردن طول و عرض جغرافیایی کاربر در وب‌سایت و یافتن آن محل روی نقشه می‌پردازیم. بدین ترتیب با Geolocation API در جاوا اسکریپت آشنا خواهیم شد. Geolocation API در جاوا اسکریپت به ما امکان می‌دهد که مختصات جغرافیایی کاربر را به همراه برخی مشخصه‌های دیگر به دست آوریم. به این ترتیب می‌توانیم با استفاده از نرم‌افزار نقشه مورد نظر خود مکان آن‌ها را نمایش دهیم و یا این موقعیت را برای تحلیل‌های بعدی در پایگاه داده ذخیره کنیم.

فهرست مطالب این نوشته

از چه بخشی از Geolocation API استفاده کنیم؟

در این راهنما صرفاً روی نمایش طول و عرض جغرافیایی کاربر روی نقشه OpenStreetMap (+) تمرکز داریم.

از چه بخشی از Geolocation API استفاده کنیم؟

در این مقاله از navigator.geolocation و از متد ()getCurrentPosition استفاده می‌کنیم. چنان که در MDN بیان شده است:

Geolocation API از طریق فراخوانی Navigator.geolocation در دسترس ما قرار می‌گیرد. به این ترتیب مرورگر کاربر از وی می‌خواهد که دسترسی به داده‌های موقعیتی را فراهم سازد. اگر کاربر قبول کند، مرورگر از بهترین کارکرد ممکن روی دستگاه (مثلاً GPS) برای به دست آوردن این اطلاعات استفاده می‌کند.

فیلم آموزش جاوا اسکریپت JavaScript در فرادرس

کلیک کنید

()Geolocation.getCurrentPosition موقعیت کنونی دستگاه یعنی طول و عرض جغرافیایی را بازیابی می‌کند. برای این که این مقاله خلاصه باشد، صرفاً پارامتر مورد نظر که یک تابع callback در صورت موفقیت است ارائه‌ می‌کنیم. به این منظور از یک تابع arrow بهره می‌گیریم.

کد HTML

یک صفحه به نام geo.html ایجاد کرده و هر کجا که دوست دارید ذخیره کنید:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<meta http-equiv="X-UA-Compatible" content="ie=edge">
7<title>Location Test</title>
8</head>
9<body>
10<button onclick='locate();' >Get Location</button>
11<h1 id = 'posStatus'></h1>
12<a id = 'locInfo' target="#"></a>
13</body>
14</html>

posStatus صرفاً پیام ...Locating را نمایش می‌دهد، اما می‌تواند برای نمایش خطا نیز استفاده شود. locInfo طول و عرض جغرافیایی را به صورت لینک به OpenStreetMap با پارامترهای Latitude و Longitude نمایش می‌دهد.

کد جاوا اسکریپت

اسکریپت زیر را به تگ <head> اضافه کنید:

1<script>
2function locate() {
3   const posStatus = document.querySelector('#posStatus');
4   const locInfo = document.querySelector('#locInfo');
5   posStatus.innerHTML='Locating...'
6   if (navigator.geolocation) {
7      navigator.geolocation.getCurrentPosition((position)=>{
8      const lat  = position.coords.latitude;
9      const long = position.coords.longitude;
10      posStatus.innerHTML='Location';
11      // Display Latitude and Logitude
12      locInfo.innerHTML = `Latitude: ${lat}, Longitude: ${long}`;
13      // Create the link. Use map=15-19 for zooming out and in
14      // Pass lat and long to openstreetmap
15      locInfo.href = `https://www.openstreetmap.org/#map=19/${lat}  /${long}`;
16      });
17   }
18}
19</script>

اجرای اپلیکیشن

صفحه geo.html را در مرورگر باز کرده و روی دکمه Get Location بزنید. در صورتی که از شما خواسته شد، روی Allow Access کلیک نمایید. پس از مدت کوتاهی باید چیزی مانند تصویر زیر ببینید:

Geolocation API در جاوا اسکریپت

اگر روی لینک‌های Latitude یا Longitude کلیک کنید، موقعیتتان را در نقشه OpenStreetMap در سطح بزرگ‌نمایی 19 نمایش می‌دهد.

سخن پایانی

این مثال ساده‌ای است که برای معرفی یک API جالب جاوا اسکریپت طراحی شده است.

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

شما می‌توانید برخی گزینه‌های جالب دیگر این API از قبیل altitude ،heading و speed را نیز مورد بررسی قرار دهید.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

بر اساس رای ۱ نفر

آیا این مطلب برای شما مفید بود؟

اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.

ثبت نظر

منابع:

javascript-in-plain-english

میثم لطفی (+)

«میثم لطفی» در رشته‌های ریاضیات کاربردی و مهندسی کامپیوتر به تحصیل پرداخته و شیفته فناوری است. وی در حال حاضر علاوه بر پیگیری علاقه‌مندی‌هایش در رشته‌های برنامه‌نویسی، کپی‌رایتینگ و محتوای چندرسانه‌ای، در زمینه نگارش مقالاتی با محوریت نرم‌افزار با مجله فرادرس همکاری دارد.