0921-734-5800
musavi.alireza@gmail.com
همین امروز تماس بگیرید
ورود به سایت ثبت نام در سایت
فن وب و اینترنت > دوره > JavaScript > نقشه با JavaScript

نقشه با JavaScript

خلاصه این مقاله :

امروزه سرویس های ارائه دهنده خدمات در اینترنت عموما از سرویس نقشه گوگل استفاده می کنند . متاسفانه این سرویس در ایران مدتی است که دارای مشکلات متعددی شده و خطاهای غیر مترقبه ای می دهد که باعث آزار برنامه نویسان شده است . در این سری آموزش قصد دارم گزینه ای دیگری به جز Google Map را به شما معرفی کنم . این روش در واقع استفاده از یک کتابخانه و یا دستور خاص نیست . برای استفاده از این روش شما باید حتما با اصول و مفاهیم مسیر یابی آشنا شوید . در این روش ما مستقیم به سراع اصل مطلب رفته و موضوعات را از ریشه و اساس بررسی و پیاده سازی می کنیم .

  • مدت زمان آموزش این مقاله : ۳۰ دقیقه
تعاریف :

برای شروع کار ابتدا یک سری تعاریف و اختصارات رو با هم بررسی می کنیم :

OSM :

مخفف عبارت Open Street Map می باشد و عبارت است از یک نرم افزار یا کتابخانه OpenSource برای استفاده از نقشه در سایت . این سرویس به صورت رایگان بوده و هر کاربری می تواند با داشتن دانش و اطلاعات از این سرویس از این امکان در سایت خود استفاده نماید . فقط نکته مهم که باید در نظر داشته باشید این است که این سرویس صرفا نقطه یابی و نمایش نقشه روی صفحه می باشد و با استفاده از این سرویس نمی توانید مسیر یابی کنید . این سرویس صرفا یک سری داده به ما می دهد لذا برای نمایش این اطلاعات در صفحه باید از نرم افزارهای دیگری استفاده کرد . شرکت هایی مانند Mapbox  یا Potlatch یا Leaflets کتابخانه های برای درج نقشه در صفحه با استفاده از همین تکنولوژی ایجاد نموده اند . برای دیدن تاریخچه و توضیحات تکمیلی این سرویس به این صفحه مراجعه کنید . صفحه اصلی این سایت نیز در این لینک قابل مشاهده است .

OSRM :

مخفف عبارت Open Street Routing Machine می باشد . این سرویس مکمل سرویس OSM می باشد و برای مسیر یابی از آن استفاده می شود . در نظر داشته باشید که برای مسیر یابی باید حتما از این کتابخانه استفاده کنید . برای کسب اطلاعات بیشتر به سایت OSRM مراجعه کنید . در این سایت می توانید کلیه متدهای مورد نیاز خود برای مسیر یابی را دیده و از آن استفاده کنید .

در نظر داشته باشید که این سرویس ها به صورت رایگان در اختیار تمام استفاده کنندگان قرار می گیرند لذا در صورت درخواست بیشتر از حد طبیعاتا خطای مربوط به درخواست بیشتر برای فرستاده خواهد شد پس باید این موضوع را در نظر بگیریم “در صورتیکه نیاز به ارائه خدمات مطمئن داریم حتما باید از سرویس های پولی شرکت گوگل و یا شرکت های دیگر استفاده کنیم” .

برای استفاده از این سرویس دو راه حل داریم :
  • استفاده مستقیم از سرویس های OSM , OSRM:  این روش اصولی و کاملا از پایه است  . تصویر کنید می خواهید یک CMS با زبان برنامه نویسی Turbo C بنویسید . خیلی عالیست ولی خوب نیازی به توضیح ندارد .
  • استفاده از سیستم های رابط مانند Mapbox  یا Leaflets : این سایتها کار را برای ما راحت تر می کنند ، این سایت ها با ساخت کلاس ها و متدهائی پلی بین ما و سیستم های OSM , OSRM هستند . اما مشکل اینجاست که این سایت ها نیز رایگان نیستند و برای درخواست هائی محدودی به صورت رایگان به ما سرویس می دهند وبرای استفاده بیش از اندازه باید هزینه آنرا پرداخت کنیم .این سایت ها یک کلید برای استفاده به ما می دهند و در هنگام ارسال درخواست به سرور آنها ، در صورتیکه تعداد درخواست بالاتر از مقدار مجاز شود ، درخواست پردازش نخواهد شد . به عنوان مثال سرور MapBox حداکثر تا ۵۰٫۰۰۰ درخواست نمایش نقشه و ۵۰٫۰۰۰ مسیر یابی را برای ما پردازش می کند . در صورتیکه علاقمند به دانستن نرخ قیمت این سایت هستید به این لینک مراجعه کنید . حال شما هستید که باید درخواست های خود را در ماه بررسی کنید و نتیجه بگیرید که آیا سرویس رایگان نیاز شما را برآورده خواهد کرد یا خیر ؟

برای استفاده سرویس نقشه در داخل صفحه ما دو مرحله خواهیم داشت :

  • درج نقشه روی صفحه و مدیریت المانهای مربوط به نقشه
  • مسیریابی بین دو نقطه از مسیر
نمایش نقشه روی صفحه :

جهت نمایش نقشه ما از ابزارها و متدهای سیستم Leaflets , Mapbox استفاده می کنیم . اجازه دهید یک مساله ساده تعریف کنیم :

برنامه ای بنویسید که یک نقشه روی صفحه به نمایش بگذارد . در این نقشه میدان انقلاب و میدان ولیعصر را نشانه گذاری کنید . می توانید نتیجه را در این صفحه مشاهده کنید .

پیش نیاز :

  • آشنائی با HTML , CSS , Javascript به صورت کامل و حرفه ای الزامی است .
مرحله اول :

به سایت MapBox مراجعه کرده و با ثبت نام در آن یک KEY برای خود درست کنید . این کلید یک رشته است که با عبارت pk. شروع می شود .

مرحله دوم :

در بخش Header سایت فایل های زیر را به برنامه خود لینک کنید :

برای دانلود کتابخانه های مورد نیاز نیز می توانید به این آدرس مراجعه کنید . البته برای کار حتی می توانید فایل های مورد نظر را در داخل Host خود ذخیره  و سپس از آنها استفاده کنید.

مرحله سوم :

کجا می خواهید نقشه را روی صفحه قرار دهید ؟ برای قرار دادن نقشه روی صفحه یک بخش با id=map ایجاد کنید :

مرحله آخر :

حالا اجازه دهید که مقداری برنامه بالا رو تحلیل کنیم :

در ابتدا برای شروع کار طول و عرض جغرافیائی دو نقطه را استخراج می کنیم . برای راحتی در ادامه کار طول و عرض جغرافیائی را در یک Object با عضوهای lon , lat قرار می دهیم . دقت کنید که انتخاب این اسامی برای استفاده های بعدی ضروری است .

استفاده از نقشه در داخل صفحه و با استفاده از JS با استفاده از کلاس L انجام می شود . با دستور زیر ما یک لایه نقشه می سازیم . لایه ساخته شده را در div که با id=map ساخته ایم قرار می دهیم . برای لایه ساخته شده نیز دو پارامتر معرفی می کنیم اول نقطه مرکزی و دوم مقدار Zoom . نقطه مرکزی مختصات جغرافیائی است که در مرکز صفحه نمایش داده خواهد شد . در این مثال ما مرکز صفحه را میدان انقلاب تنظیم کرده ایم .مقدار Zoom بین ۰ تا ۲۱ است و هر چقدر بالاتر می رود مقدار بزرگنمائی بیشتر می شود .

در قطعه کد زیر ما درخواست یک لایه از نوع tile از سرور mapbox می کنیم و Token ی که قبلا ساخته بودیم در اینجا برای کنترل هویت استفاده می کنیم . در نهایت باید نتیجه این درخواست را با استفاده از تابع addto به لایه mymap اضافه کنیم .

صرفا با انجام کارهای بالا می توانیم که نقشه مورد نظر خودمان را به مرکزیت میدان انقلاب روی صفحه نمایش نماش دهیم ولی در همچنان هیچ نقطه ای در داخل صفحه مارک نشده است . برای این منظور قطعه کد زیر را به انتهاب صفحه اضافه می کنیم :

همچنان که مشاهده می کنید باز هم ما از کلاس L برای اضافه کردن یک لایه به نقشه mymap استفاده کرده ایم . در این قطعه کد که خیلی ساده نوشته شده است یک مارکر به مختصات ولیعصر به نقشه mymap اضافه می شود و در ادامه یک متن با عنوان “مبدا” نیز به مارکر اضافه شده ملحق یا Bind می شود . همین کار را می توان برای نقطه میدان انقلاب نیز انجام داد .

جمع بندی و نتیجه گیری :

به همین سادگی ما توانستیم که مختصات مورد نیاز خود را در روی نقشه مشخص کرده و آن را روی نقشه نمایش دهیم . البته کار به همین سادگی نیست و Leaflets ابزارهای خیلی بیشتری برای مدیریت نقشه به ما داده که با مرور نمونه ها در سایت می توانید با آن آشنا شوید .

  • برای دیدن نمونه های بیشتر روی این لینک کلیک کنید .
  • برای برنامه نویسان خبره که قصد دارند نقشه های خیلی متنوع و کاربردی بسازند توصیه می کنم که حتما با ساختار کلاس این Object آشنا شوند . خوشبختانه Leaflets ساختار کلاس خودش را نیز برای ما در این لینک ارائه نموده است .
  • جهت استفاده از کلیه امکانات نیز می توانید از این راهنما استفاده کنید .

موضوع بسیار جالب اینجاست که Leaflets به برنامه نویسان اجازه داده که برنامه های خودشان را در قالب پلاگین نوشته و هسته اصلی این سیستم راتوسعه دهند . شاید نیاز شما را یکی دیگر از برنامه نویسان تولید کرده باشد پس بهتر است قبل از اینکه تصمیم بگیرید سیستم خود را پیاده سازی کنید پلاگین های نوشته شده سایر کاربران و برنامه نویسان را نیز بازدید کنید .

آیا این مطلب توانست برای شما مفید واقع شود ؟

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

91182

این پست با کد 2573 در تاریخ ۹۷/۱۰/۱۲ توسط علیرضا نوشته شده است.

2 دیدگاه برای مطلب " نقشه با JavaScript " ثبت شده است
    commenter name
    رضا در تاریخ ۹۹/۰۸/۲۲ و ساعت ۱:۴۲ ب.ظ گفت :

    سلام. خیلی بهتر میشد اگه در انتها کد رو بصورت کامل و یکجا میذاشتید. من طبق آموزش پیش رفتم ولی با خطای زیر مواجه شدم

    Map container not found.

    به این دیدگاه پاسخ دهید

      commenter name
      علیرضا در تاریخ ۰۰/۰۴/۱۱ و ساعت ۸:۰۵ ق.ظ گفت :

      رضای عزیز
      برای اینکه بتونم کمکت کنم باید کد شما رو یکبار بررسی کنم

      به این دیدگاه پاسخ دهید

دیدگاه خود را بنویسید

در نظر داشته باشید ایمیل شما نزد ما خصوصی می باشد .

برای نوشتن پیغام از هر گونه متنی می توانید استفاده کنید