در حال بارگذاری...

موقعیت‌یابی در HTML

درس قبل، Web Storage رشته‌های کلید/مقدار کوچک را با localStorage و sessionStorage به‌خاطر می‌سپرد. این درس ذخیرهٔ رشته را ترک می‌کند و Geolocation را معرفی می‌کند: خواندن تقریبی عرض و طول جغرافیایی دستگاه از طریق navigator.geolocation — فقط بعد از اجازهٔ کاربر. HTML هنوز اسکریپت بار می‌کند؛ اسکریپت موقعیت می‌پرسد. دامنه عملی است — یک‌بار خواندن، watch/clear، و رد مؤدبانه — نه SDK نقشه، محصول ردیابی، یا دیتابیس geo سرور.

چرا geolocation در کورس HTML

مبتدی اغلب دکمهٔ «نزدیک من» یا نمایش مختصات می‌سازد. Geolocation اولین API رایج مرورگر برای این است. بعد از «JS رشته به‌خاطر می‌سپارد» در web storage، تقسیم اینجا فرق دارد: HTML پوسته و دکمه را دارد؛ JS درخواست مختصات برای همان origin را. فقط getCurrentPosition، دانستن وجود watchPosition، و مدیریت رد اجازه کافی است.

پاسخ مستقیم

۱) از جاوااسکریپت navigator.geolocation.getCurrentPosition(success, error) را صدا بزنید. ۲) در موفقیت position.coords.latitude و longitude را بخوانید. ۳) ترجیحاً قبل از پرسش کلیک کاربر — مرورگر پرامپت اجازه نشان می‌دهد. ۴) watchPosition فقط وقتی به‌روزرسانی مداوم لازم است؛ با clearWatch(id) متوقف کنید. ۵) تگ HTML <geolocation> نیست — مثل Web Storage اسکریپت‌محور است. ۶) اگر کاربر رد کند یا fix نباشد، مسیر خطا را اجرا کنید و صفحه را مفید نگه دارید.

📊 getCurrentPosition vs watchPosition

Topic getCurrentPosition watchPosition
Typical use One-shot “where am I now” Ongoing updates while watching
Callback pattern success once (plus optional error) success may fire repeatedly
Stop watching Not needed (single read) clearWatch(watchId)
Beginner fit Share-location button Live tracking demos (careful)
Permission Still required Still required
This course depth Intro focus Short demo + clearWatch only

دموی کوچک getCurrentPosition

کلیک دکمه می‌تواند موقعیت فعلی را بخواهد و عرض/طول را چاپ کند. اگر API نباشد یا کاربر رد کند، پیام آرام نشان دهید نه کرش.

getCurrentPosition with permission

html 
<button id="loc" type="button">Share location</button>
<pre id="out"></pre>
<script>
const out = document.getElementById("out");
document.getElementById("loc").onclick = function () {
if (!navigator.geolocation) {
out.textContent = "No geolocation support";
return;
}
out.textContent = "Waiting for permission…";
navigator.geolocation.getCurrentPosition(
function (pos) {
out.textContent =
pos.coords.latitude + ", " + pos.coords.longitude;
},
function () {
out.textContent = "Permission denied or unavailable";
}
);
};
</script>

خواندن فراخوانی‌های getCurrentPosition

  • navigator.geolocation نقطهٔ ورود مرورگر است (ممکن است در کلاینت قدیمی نباشد)
  • getCurrentPosition(success, error) یک‌بار می‌پرسد؛ ممکن است دیالوگ اجازه بیاید
  • latitude / longitude اعداد رایجی‌اند که مبتدی اول چاپ می‌کند
  • قبل از صدا با if (!navigator.geolocation) بررسی کنید
  • callback خطا رد، timeout و نبود موقعیت را پوشش می‌دهد
  • در دموی واقعی HTTPS (یا localhost) ترجیح دارد
  • برخلاف Web Storage اینجا چیزی «ذخیره» نمی‌شود — فقط در صورت اجازه می‌خوانید

watchPosition برای به‌روزرسانی مداوم

watchPosition شکل success/error مشابه دارد ولی با حرکت دستگاه می‌تواند دوباره شلیک کند. id برگشتی را نگه دارید و با clearWatch تمام کنید — در دموی مقدمه watch را برای همیشه باز نگذارید.

watchPosition and clearWatch

html 
<button id="start" type="button">Watch location</button>
<button id="stop" type="button">Stop watching</button>
<pre id="live"></pre>
<script>
const live = document.getElementById("live");
let watchId = null;
document.getElementById("start").onclick = function () {
if (!navigator.geolocation) {
live.textContent = "No geolocation support";
return;
}
if (watchId !== null) {
return;
}
live.textContent = "Watching…";
watchId = navigator.geolocation.watchPosition(
function (pos) {
live.textContent =
pos.coords.latitude + ", " + pos.coords.longitude;
},
function () {
live.textContent = "Permission denied or unavailable";
watchId = null;
}
);
};
document.getElementById("stop").onclick = function () {
if (watchId !== null) {
navigator.geolocation.clearWatch(watchId);
watchId = null;
live.textContent = "Stopped watching";
}
};
</script>

خواندن ایدهٔ watchPosition

  • همان مدل اجازه مثل getCurrentPosition
  • success ممکن است چندبار در حین watch اجرا شود
  • clearWatch(watchId) به‌روزرسانی را قطع می‌کند — برای دمو همیشه Stop بگذارید
  • هنوز کتابخانهٔ نقشه نیست؛ فقط مختصات می‌گیرید
  • هنوز Web Storage نیست — مختصات خودکار به‌عنوان کلید ذخیره نمی‌شود
  • get در برابر watch را با چندبار نیاز به fix انتخاب کنید
  • درس بعدی اختیاری: drag and drop عناصر را با اشاره‌گر جابه‌جا می‌کند

انتخاب زمان پرسش

  • کاربر «Share location» یا «نزدیک من» زد: زمان خوب برای getCurrentPosition
  • بار صفحه بدون زمینه: معمولاً بد — تهاجمی حس می‌شود
  • نیاز به به‌روزرسانی حرکت مداوم: watchPosition + کنترل توقف نمایان
  • ذخیرهٔ ترجیح تم: آن Web Storage بود (درس قبل)، نه geolocation
  • محصول کامل نقشه/مسیریابی/geocoding: فراتر از مقدمهٔ HTML
  • ردیابی خاموش برای تبلیغات: خارج از دامنه و ضدحریم خصوصی

تمرین — مؤدبانه یک fix بخواهید

  1. دموی getCurrentPosition را بچسبانید؛ کلیک کنید؛ قبول یا رد کنید.
  2. تأیید کنید <pre> یا مختصات یا پیام رد آرام نشان می‌دهد.
  3. دموی watchPosition را بچسبانید؛ شروع کنید؛ Stop — «Stopped watching».
  4. (اختیاری) اجازه را رد کنید و تأیید کنید صفحه بدون throw کار می‌کند.
  5. جمله: Web Storage رشته ذخیره می‌کند؛ Geolocation با اجازه مختصات می‌خواند.
  6. ترجیحاً روی http(s) سرو کنید نه فقط file:// اگر مرورگر API را بست.
  7. جلوتر: drag and drop عناصر HTML را می‌کشد — نه موقعیت.

اشتباهات آسان

  • انتظار تگ HTML <geolocation> به‌جای navigator.geolocation
  • صدا زدن geolocation در هر بارگذاری بدون عمل کاربر یا هدف روشن
  • نادیده گرفتن callback خطا وقتی اجازه رد می‌شود
  • اشتباه گرفتن Geolocation با Web Storage (موقعیت ≠ رشتهٔ کلید/مقدار)
  • رها کردن watchPosition بدون clearWatch
  • فرض GPS دقیق همیشه در فضای باز
  • گرفتن این مقدمه به‌عنوان کل کورس نقشه یا قانون حریم خصوصی

خلاصه

  • Geolocation API جاوااسکریپت با اجازه روی navigator.geolocation است
  • getCurrentPosition یک fix؛ watchPosition + clearWatch به‌روزرسانی مداوم
  • HTML رابط را می‌دهد؛ اسکریپت ترجیحاً بعد از عمل واضح کاربر می‌پرسد
  • رد و نبود پشتیبانی را مهربان مدیریت کنید
  • Web Storage رشته‌های به‌خاطر‌سپرده‌شده بود؛ این درس مختصات مجاز است
  • بعدی: drag and drop در HTML برای جابه‌جایی عناصر با اشاره‌گر

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓
5
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 64 از 68
Html آموزش