پیاده سازی لوکیشن و نقشه و GPS روی مروگر با جاوا اسکریپت

اول از همه اجازه بدید فرق نقشه و لوکیشن و مختصات و GPS بگماینا همه به هم ربط دارن ولی یکی نیستن !اگه بخوایم به زبون خیلی ساده بگیم نقشه همون نقشه ی کل کره ی زمینه بعد اومدن این نقشرو (مثل متر) به قسمت های مختلف تقسیم بندی کردن که بهش میگن مختصات ! بعد هر نقطه روی این صفحه میشه لوکیشن یا موقعیت ، که توی مبحث ما با دوتا عدد نشونش میدن مثلا 55,37 که اگه همین الان همین 55,37 توی سرچ گوگل بزنید میفتید توی روسیه نزدیکای موسکو !مشاهده این آموزش به صورت ویدئو توی یوتوب (۲۵ دقیقه) (دابل اسپید ببین ۱۲ دقیقه ?)مشاهده دموی زنده این آموزش توی استکبلیتزhttps://stackblitz.com/edit/web-platform-yryhxqبه عدد اولی یعنی 55 میگیم عرض جغرافیایی (latitude) (حرکت عمودی یا بالا و پایین نقشه)به دومی یا همون 37 میگیم طول جغرافیایی (longitude) (حرکت به چپ و راست نقشه)(به اختصار به اینا lat,lng هم میگن)تا اینجا همه چیز روی نقشه و عدد بودحالا GPS چیه ؟جی پی اس مخفف Global Positioning System یا سامانه موقعیت‌یاب جهانی که یک سری ماهواره توی مدار زمین هستند که هرکس بهش درخواست بده و وصل بشه موقیت همون شخصو بهش میگه !میدونم هیجان دارید که زود بریم لوکیشن بازی کنیم ولی اجازه بدید قدم به قدم بریم جلو که قاطی نکنید✅ پیاده سازی نقشه روی مرورگر با جاوااسکریپتنقشه ها یا همون map چیزی بجز یک سری تصاویر که بهشون میگن tile (تایل) نیستن که کنار هم قرار میگیرن و نقشرو تشکیل میدن ! امکان درگ کردن ، زوم و اسکرول و فلگ زدن (پرچم) و کلا هرچی که بخواید هم میتونن داشته باشن و فرقی هم نداره دارید با چی کار میکنید اگه html باشه از همون المنت های مرورگر استفاده میشه اگه اندروید باشه از المنت های خودش و ... حالا ما اگه خودمون بخوایم همچین چیزی با html بسازیم یکم زمانبره و بخاطر همین میایم از پکیج ها کتابخونه ها استفاده میکنیم و خیلی راحت توسعش میدیم ! (ولی اگه علاقه دارید بسازید)لایبرری leafletjsخب یکی از پکیج های بی درد سر برای این کار leafletjs هست که میتونید برید توی سایتش https://leafletjs.com و داکیومنتاشو بخونید و کارتونو راه بندازید ما هم اینجا یه معرفی کوچیک میکنیم ازشبرای پیاده سازیش اول از همه این دوتارو باید لود کنید (میتونید دانلودنشون کنید توی هاست خودتون و ازنونجا هم لود کنید)<link rel=&quotstylesheet&quot href=&quothttps://unpkg.com/leaflet@1.8.0/dist/leaflet.css&quot /> <script src=&quothttps://unpkg.com/leaflet@1.8.0/dist/leaflet.js&quot>و بعدش با این ۵ خط کد میایم بالا سر تهران وایمیسیم !<div id=&quotmap&quot style=&quotwidth:500px;height:500px&quot></div> var map = L.map('map').setView([35.69, 51.38], 10); L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);یعنی در نهایت یه همچین چیزی داریم !<!DOCTYPE html> <html lang=&quoten&quot> <head> <title>map</title> <meta charset=&quotUTF-8&quot /> <meta name=&quotviewport&quot content=&quotwidth=device-width&quot /> <link rel=&quotstylesheet&quot href=&quothttps://unpkg.com/leaflet@1.8.0/dist/leaflet.css&quot /> <script src=&quothttps://unpkg.com/leaflet@1.8.0/dist/leaflet.js&quot> </head> <body> <div id=&quotmymap&quot style=&quotwidth:500px;height:500px&quot></div> var map = L.map('mymap').setView([35.69, 51.38], 10); L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); </body> </html>اون div که ساختیم آی‌دیش mymap همون جاییه که میخوایم نقشه نمایش داده بشهقسمت var map = L.map('mymap') یه آبجکت نقشه ساختیم و گفتیم که توی همون div که آیدیش mymap بود نقشمونو نمایش بدهاونجا هم که گفتیم setView([35.69, 51.38], 10) پارامتر اولی که آرایس مختصات تهران روی نقشس و پارامتر دومی هم مقدار زوم روی نقسشاونجا هم که نوشته https://tile.openstreetmap.org در حقیقت بیس آدرس لود کردن تایل هاست (همون تصاویر نقشه به صورت تکه تکه) اینو میتونید از سرور خودتون یا جای دیگه هم لود کنیدتموم شد الان توی مرورگر شما یه نقشه دارید که از لایبرری leaflet استفاده میکنه و از تایل های openstreetmap استفاده میکنه و روی مختصات تهران وایساده !اگه بیشتر میخواید راجع به تایل ها و استفاده ازشون بدونید میتونید به https://wiki.openstreetmap.org/wiki/Tiles مراجعه کنید و داکیومنتاشو بخونیدرفتن به یک مختصات خاص ?خب تا اینجا ما نقشمونو توی مرورگر با جاوا اسکریپت نمایش دادیمحالا اگه بخوایم دوربین نقشرو به یک نقطه ی خاص ببریم و وایسیم فقط کافیه از همون var map که تعریف کردیم setView صدا بزنیم ! که پارامتر اول یک آرایس که همون مختصاته و پارامتر دوم مقدار زومه که کمترینش ۰ که کل دنیارو نشون میده و بیشترینش ۱۸ که دیگه خیلی میره نزدیک !map.setView([35.69, 53.38], 15)علامت زدن روی نقشه?حالا اگه بخوایم یه علامت روی یه نقطه خاص بزنیم اینجوری عمل میکنیم :var marker = L.marker([35.69, 51.38]).addTo(map);خب تا اینجا یکم با نقشه و تغییر موقیعت و اینا آشنا شدیم اگه بیشتر میخواین راجع به این جنگولک بازیا بدونید اینجا برید و کامل همه داکیومنتاشو ببینیدکارای خیلی بیشتر میشه کرد...https://leafletjs.com/examples.htmlگرفتن موقعیت کاربر از مرورگرخب اینجا دیگه هیچ ربطی به نقشه و leaflet نداره و ما فقط میخوایم با مرورگر و جاوا اسکریپت خالص کار کنیم و موقعیتو بگیریم و بعد خودمون ربطش میدیم به نقشه !گرفتن مختصات کاربر از مرورگر با تابع navigator.geolocation.getCurrentPosition انجام میشهکه داکیومنت کاملش اینجاست https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPositionاین تابع وقتی اجرا میشه خودش درخواست پرمیژن هم اجار میکنه که به این صورت باید اجراش کنید navigator.geolocation.getCurrentPosition(function(res) { console.log(res) });که اینارو توش دارهcoords: GeolocationCoordinates accuracy: 150 altitude: null altitudeAccuracy: null heading: null latitude: 37.774929 longitude: -122.419416 speed: null [[Prototype]]: GeolocationCoordinates timestamp: 1662291570037خب واضحه که چه چیزایشو ما میخوایم ! الان فقط کافیه latitude و longitude به اون نقشه ای که بالا داشتیم بدیم !یه چیزی مثل این :function where_am_i() { navigator.geolocation.getCurrentPosition(function (res) { map.setView([res.coords.latitude, res.coords.longitude], 10); }); }الان هر وقت تابع where_am_i اجرا بشه اول اجازه میگیره که میخواد به لوکیشن دست رسی داشته باشه بعد نقشه مستقیم میره روی لوکیشنی که کاربر دارهاما خیلی وقتا ما روی کامپیوتر داریم دولوپ میکنیم و خب GPS ممکنه فعال نباشهجای نگرانی نیست چون کروم توی DevTools برامون یه GPS فیک گذاشته و میتونیم اونجا باهاش بازی کنیمبرای استفاده ازش باید اینسپکت کنیم یا همون DevTool باز کنیم بعد اون سه تا نقطه کنارشو بزنیم و توی More Tools بزنم روی Sensors و بعد از Location استفاده کنیم و هر latitude , longitude خواستیم بدیماین navigator.geolocation یه watchPosition هم داره که به صورت اتوماتیک با تغییر مکان کاربر اجرا میشه و یه جورایی زنده نشون میکه که رو نقشه کجاییم و فقط کافیه یک بار اجراش کنیماینجوریnavigator.geolocation.watchPosition(function (res) { map.setView([res.coords.latitude, res.coords.longitude], 10); });بقیه داکیومنتاشم که همینجا هستhttps://developer.mozilla.org/en-US/docs/Web/API/Geolocation