ارسال شده توسط oretnom23 در تاریخ پنجشنبه 19 اردیبهشت 1391 - 15:29.
زبان
- جاوا اسکریپت
![](http://pezhvak24.ir/dl/codester-proj/sites/default/files/styles/large/public/images/oretnom23/JS-Map.png?itok=4cXGK16L)
معرفی
این پروژه کوچک تحت عنوان وب سایت نقشه آنلاین است . این یک پروژه کاربردی مبتنی بر وب است که در HTML ، CSS و جاوا اسکریپت توسعه یافته است . این یک سایت نقشه آنلاین ساده است که در آن کاربران میتوانند مکانها را کاوش کنند و مسیرهای مکانهای بین نقطه A و نقطه B (مبدا به مقصد) را با دستورالعملهای سفر بررسی کنند. سایت با استفاده از Mapbox که نقشه سایت، Geoencoding API و Directions API را فراهم می کند، امکان پذیر شده است. این برنامه همچنین با Bootstrap Framework و Fontawesome Icons برای برخی از رابط های کاربری توسعه یافته است. از قابلیت های ساده و کاربر پسند تشکیل شده است.
درباره وب سایت نقشه آنلاین
من این پروژه را با استفاده از موارد زیر توسعه دادم:
- HTML
- CSS
- جاوا اسکریپت
- جی کوئری
- بوت استرپ
- فوق العاده
- Mapbox
این وب سایت نقشه آنلاین برای همه قابل دسترسی است. سیستم نقشه ای را نمایش می دهد که کل صفحه صفحه پنجره مرورگر را پوشش می دهد. این شامل مکان جستجو، دکمه جهت، فرم مسیرها، فرم جهت، پیش نمایش جهت روی نقشه، و مکان جستجو شده پین شده است. هنگام مرور سایت، نقشه منطقه را با استفاده از مختصات پیش فرض مشاهده می کند. فرم جهت ابتدا هنگام بارگیری در دسترس نیست و تنها زمانی در دسترس خواهد بود که کاربر روی دکمه "جهت" در سمت راست بالای نقشه کلیک کند. با کلیک بر روی دکمه مذکور، قسمت Geocoding API یا Search Places Input مخفی می شود و با فرم جهت جایگزین می شود. فیلدهای ورودی جهت نیز توسط Mapbox API ارائه شده است که به کاربران امکان می دهد جزئیات جهت را بین 2 مکان بررسی کنند.
امکانات
- نمایش نقشه
- جستجوی مکان ها
- محل نتیجه جستجو را پین کنید
- نمایش جزئیات مکان پین شده (از نتایج جستجو)
- دریافت جهت
- دستورالعمل جهت را نمایش می دهد
- کنترل های ناوبری نقشه
کد منبع فقط برای اهداف آموزشی و فقط برای کمک به برنامه نویسان جدید و ارائه ایده به آنها در مورد نحوه پیاده سازی Mapbox Map API در پروژه های فعلی یا آینده خود توسعه داده شده است. می توانید کد منبع را به صورت رایگان دانلود کنید و آن را به روشی که می خواهید تغییر دهید.
عکس های فوری سیستم از برخی ویژگی ها
رابط سایت
![وب سایت نقشه آنلاین](http://pezhvak24.ir/dl/codester-proj/sites/default/files/images/oretnom23/JS-Map_0.png)
پنل دستورالعمل جهت
![وب سایت نقشه آنلاین](http://pezhvak24.ir/dl/codester-proj/sites/default/files/images/oretnom23/JS-Map-Direction%20Instruction.png)
نتیجه مکان جستجو شده
![وب سایت نقشه آنلاین](http://pezhvak24.ir/dl/codester-proj/sites/default/files/images/oretnom23/JS-Map-Search.png)
چگونه دویدن؟؟
الزامات
- فایل زیپ کد منبع ارائه شده را دانلود کنید . ( دکمه دانلود در زیر قرار دارد )
نصب/راه اندازی سیستم
- فایل فشرده کد منبع دانلود شده را استخراج کنید .
- مرورگر دلخواه خود مانند مرورگر کروم را باز کنید .
- در https://account.mapbox.com/ مرور و ثبت نام کنید .
- کد عمومی پیش فرض خود را از توکن های دسترسی Mapbox خود کپی کنید .
- فایل map.js را در پوشه کد منبع استخراج شده در یک ویرایشگر متن باز کنید و Mapbox Access Token را در mapboxgl.accessToken واقع در خط 2 قرار دهید .
- با بازگشت به سایت Mapbox ، روی دکمه Create a Map in Studion در صفحه داشبورد کلیک کنید.
- روی Upload Style کلیک کنید .
- فایل style.json را آپلود کنید .
- پس از آپلود موفقیت آمیز، سایت صفحه را به صفحه ویرایشگر سبک شما هدایت می کند.
- روی دکمه Publish کلیک کنید .
- URL سبک ارائه شده توسط سایت از سبک آپلود شده را کپی کنید .
- به ویرایشگر متن خود در همان فایل (map.js) برگردید و URL سبک کپی شده را به عنوان مقدار شی 'style' در خط 9 قرار دهید .
- فایل را ذخیره کنید.
- وب سایت نقشه آنلاین را در یک مرورگر مرور کنید . یعنی file:///C:/User/Downloads/direction_map/index.html در مرورگر شما.
ویدئوی نمایشی
خودشه. اکنون می توانید ویژگی ها و عملکردهای این وب سایت نقشه آنلاین را در JS با استفاده از Mapbox کشف کنید . امیدوارم این به شما در آنچه به دنبال آن هستید کمک کند و چیز مفیدی برای پروژه های آینده خود بیابید.
برای کدهای منبع رایگان و آموزش های بیشتر در این وب سایت کاوش کنید .
لذت ببرید 🙂