50درصد تخفیف سورس فروشگاهی دیجی کالا + اپلیکیشن اندروید تا پایان این هفته - کد تخفیف : off50
با تخفیف میخرم

نمایش مسیر راه نقشه در جاواسکریپت

نمایش مسیر راه نقشه در جاواسکریپت

در این آموزش قصد داریم به شما نحوه نمایش مسیر راه نقشه دو یا چند مکان دلخواه توسط API جاواسکریپت Google Maps نمایش دهیم. در این مثال از نشانگر (marker) برای مشخص کردن مکان ها و همچنین اتصال آن ها با کشیدن مسیر راه بین مکان ها استفاده می کنیم .

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

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

نمایش مسیر راه نقشه در جاواسکریپت

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

از کد جاواسکریپت زیر برای دریافت مختصات طول و عرض جغرافیایی کشور های خوانده شده از دیتابیس بهره بردیم.

یک تابع برای فراخوانی کلاس Polyline که برای کشیدن مسیر نقشه راه کشور ها استفاده میشود , تعریف کردیم .همینکه مختصات همه کشور ها در یک آرایه ذخیره شد , از این تابع برای کشیدن مسیر بر روی نقشه استفاده می کنیم.

 نمایش مسیر راه نقشه در جاواسکریپت با API گوگل مپ – خروجی

نمایش مسیر راه نقشه در جاواسکریپت

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

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

موفق و پیروز باشید.

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

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۷)

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  1. حسین مرتضی زاده ۲۶ اردیبهشت ۱۳۹۷

    سلام مجدد آقا یک سوال داشتم
    من از طریق نت همراه اول میرم نقشه سایتم لود میشه با adsl پارس آنلاین لود نمیکنه حتی این صفحه هم لود نمیشه نقشش
    https://www.w3schools.com/graphics/tryit.asp?filename=trymap_events_infowindow2
    دنبال راهکار هستمتست کردم چون یکسری سایتها اما نقششون باز میشه با همین نت پارس اگر پیزی تو این زمینه میدونید راهنماییم کنید تشکر
    راستی اکانت من توی ورود به سایتتون هم به مشکل خورده بررسی کنید

    پاسخ
    1. حسن شفیعی ۲۶ اردیبهشت ۱۳۹۷

      سلام . احتمالا به خاطر https و یا www هستش و بهتره یکبار هم با تغییر آی پی تست کنید . اگر حل نشت با پشتیبانی سرویس دهنده اینترنت تماس بگیرید.

      در سایت سیستم تایید ایمیل اضافه شده که هنگام لاگین به شما نحوه فعال سازی از طریق لینک نمایش داده میشه.

      موفق باشید.

      پاسخ
  2. حسین مرتضی زاده ۲۰ اردیبهشت ۱۳۹۷

    سلام مهندس شفیعی عزیز
    من کدهای زیدی در رابطه با مپ دیدم و دارم حتی از دوستان گرفتم که با روش های جالی کار میکنند حتی بدون کلید ولی خوب یادگرفتن روشها یکمی سخت و به نظرم ازون بهتر هم بود که گشتم سایت w3 دیدم خیلی قشنگ و کوتاه آموزش داده اما یک مشکلی برای من پیش اومد من کلیدم رو از گوگل گرفتم اما در قسمت Restrictions باید دامنه سایتم رو وارد میکرم اما من فعلا هاست و دامنه ندارم و میخوام روی سیستم خونه فعلا تست بگیرم که مشکل دار میشه میتونید راهنماییم کنید ؟
    اینم لینک w3
    https://www.w3schools.com/graphics/tryit.asp?filename=trymap_events_infowindow2

    پاسخ
    1. حسن شفیعی ۲۰ اردیبهشت ۱۳۹۷

      سلام . سایت های زیادی هستند که هم دامنه رایگان و هم هاست رایگان ارایه میدن که میتونید تهیه کنید و تست های خودنون رو روش انجام بدید.

      هاست و دامنه رایگان : http://parspack.com/cloud-hosting

      موفق باشید.

      پاسخ
      1. حسین مرتضی زاده ۲۰ اردیبهشت ۱۳۹۷

        به نکته خیلی خوبی اشاره کردید . اما سوالی که همیشه برای من هست اینه که آیا هاست ها پروژه های و دیتا های مارو کپی نمیکنند؟
        مخصوصا این رایگانها از داده ها استفاده نمیکنند؟

        پاسخ
      2. حسن شفیعی ۲۰ اردیبهشت ۱۳۹۷

        خیر.

        پاسخ
      3. حسین مرتضی زاده ۲۰ اردیبهشت ۱۳۹۷

        ای وای چه شانسی
        رفتم کلیدمو کانفیگ کنم گوگل میگه پولی شده و تغیراتی داره فرم میخواد پر کنی و مشخصات کارت بانکی میخواد کلا جریان پیچیده شد 🙁
        میتونید راهنماییم کنید؟

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

می خواهید یک فروشگاه آنلاین در تلگرام داشته باشید ؟

برای دریافت و نصب سورس ربات تلگرام فروشگاه آنلاین روی دکمه زیر بزنید
می خواهم فروشگاهم را در تلگرام راه اندازی کنم
close-link