طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

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


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

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

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

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

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

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

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

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

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

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

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

حتما بخوانید  کتاب آموزش JavaScript (جاوااسکریپت) به فارسی

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

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

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

دیدگاه کاربران

7 پاسخ به “نمایش مسیر راه نقشه در جاواسکریپت”

  1. حسین مرتضی زاده گفت:

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

    0
    • حسن شفیعی گفت:

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

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

      موفق باشید.

      1+
      • حسین مرتضی زاده گفت:

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

        0
      • حسین مرتضی زاده گفت:

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

        0
  2. حسین مرتضی زاده گفت:

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

    0
    • حسن شفیعی گفت:

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

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

      موفق باشید.

      1+

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

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

جدیدترین آموزش های آنلاین



دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

افزایش امنیت سایت

مجوزهای ما


logo-samandehi نماد اعتماد الکترونیک

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

دانلود کتاب

عضویت در خبرنامه