خواندن ۵ دقیقه·۲ سال پیش

پیاده سازی لوکیشن و نقشه و 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

جاوا اسکریپت طراحی سایت فرانت اند برنامه نویسی

shopid

shopid.ir ->open source online shop solutions

شاید از این پست‌ها خوشتان بیاید