آموزش Vue JS + Google Maps API: راهنمای نهایی دوستانه مبتدیان

سرفصل ها و درس ها

شروع شدن Getting Started

• شروع کار با Vue JS Getting Started With Vue JS

• کلید Google Maps API را دریافت کنید Obtain Google Maps API Key

برنامه Vue JS Detector Location [HTML5 Geolocation API & Geocoding API] Build A Location Detector Vue JS App [HTML5 Geolocation API & Geocoding API]

• آنچه در پایان این ماژول خواهید ساخت What You Will be Building by the End of this Module

• یک کامپوننت و مسیر Vue ایجاد کنید Create a Vue Component and Route

• فرم موقعیت مکانی کاربر را با استفاده از Semantic-UI بسازید Build User Location Form Using Semantic-UI

• HTML5 Geolocation API چیست؟ What is HTML5 Geolocation API?

• یک درخواست HTTP برای API جغرافیایی نقشه های گوگل Make An HTTP Request To Google Maps Geocoding API

• خطا و راه حل های CORS هنگام درخواست HTTP به API کدگذاری جغرافیایی CORS Error & Solutions When Making HTTP Request to Geocoding API

• خطاها و راه حل های رایج هنگام درخواست HTTP به Google Maps API Common Errors & Solutions When Making an HTTP Request To Google Maps API

• رسیدگی به خطاهای سرور Vue JS Client و Google Maps API Handling Vue JS Client and Google Maps API Server Errors

• چگونه API تکمیل خودکار Google Maps را فعال کنیم؟ How To Enable Google Maps Autocomplete API?

• چگونه مکان فعلی کاربر را در نقشه گوگل نمایش دهیم؟ How To Display User's Current Location On The Google Maps?

• کد پروژه تکمیل شده را دانلود کنید Download The Completed Project Code

• وقت آن است که آنچه را که در این ماژول آموخته اید آزمایش کنید Time To Test What You've Learned In This Module

• زمان بازخورد! Feedback Time!

با استفاده از Google Maps Places API یک برنامه CloseBuy بسازید Build A CloseBuy App Using Google Maps Places API

• آنچه در پایان این ماژول خواهید ساخت What You Will be Building by the End of this Module

• درخواست جستجوی Google Maps Nearby چیست؟ What is Google Maps Nearby Search Request?

• یک کامپوننت CloseBuy Vue JS ایجاد کنید Create A CloseBuy Vue JS Component

• یک تماس HTTP با Google Maps در نزدیکی درخواست جستجو کنید Make An HTTP Call To Google Maps Nearby Search Request

• هنگام استفاده از API تکمیل خودکار Google Maps، داده‌های مکان‌های نزدیک را دریافت کنید Get Nearby Places Data When Using Google Maps Autocomplete API

• نمایش داده های مکان ها در نما Display Places Data on the View

• نمایش داده‌های مکان‌ها در نمای Google Maps Show Places Data on the Google Maps View

• وقتی روی یک نشانگر کلیک می‌شود، نکته‌ی ابزار را نمایش دهید Show Tooltip (callout) When A Marker is Clicked

• نمایش اطلاعات بیشتر درباره یک مکان با استفاده از Google Maps Place Details Show More Information About A Place Using Google Maps Place Details

• انتخاب خودکار نشانگرها هنگامی که مورد فهرست در Vue JS کلیک می شود Auto Select Markers When List Item is Clicked in Vue JS

• خوشه بندی نشانگر را به خرید نزدیک اضافه کنید Add Marker Clustering To The Close Buy

• وقت آن است که آنچه را که در این ماژول آموخته اید آزمایش کنید Time To Test What You've Learned In This Module

• زمان بازخورد! Feedback Time!

برنامه Vue JS Calculator Distance با استفاده از Distance Matrix API & Directions Distance Calculator Vue JS App Using Distance Matrix API & Directions API

• آنچه در پایان این ماژول خواهید ساخت What You Will be Building by the End of this Module

• آنچه در پایان این ماژول خواهید ساخت What You Will be Building by the End of this Module

• اجزای برنامه ماشین حساب فاصله Vue JS را ایجاد کنید Create Distance Calculator Vue JS App Components

• طرح‌بندی برنامه ماشین‌حساب فاصله Vue JS Distance Calculator Vue JS App Layout

• طراحی فرم مقصد مبدا با استفاده از چارچوب CSS UI معنایی در Vue JS Design Origin Destination Form Using Semantic UI CSS Framework in Vue JS

• Google Maps Autocomplete API To Origin & Destination Fields Input را فعال کنید Enable Google Maps Autocomplete API To Origin & Destination Input Fields

• Google Maps Distance Matrix API چیست؟ What is Google Maps Distance Matrix API?

• یک درخواست HTTP به Google Maps Distance Matrix API Make An HTTP Request To Google Maps Distance Matrix API

• نمایش خطاهای سرور Vue JS Client و Google Maps API Display Vue JS Client & Google Maps API Server Errors

• یک پروژه Firebase ایجاد کنید Create A Firebase Project

• ذخیره اطلاعات مسیر به پایگاه داده Cloud Firestore (Firebase) Store Route Data To The Cloud Firestore Database (Firebase)

• نمایش داده‌های فهرست مسیرها در برنامه Vue JS Show Route List Data On The Vue JS app

• مرتب سازی داده های مسیر بر اساس فاصله و مدت زمان با استفاده از Firebase Sorting Route Data By Distance & Duration Using Firebase

• نحوه به اشتراک گذاری داده ها بین مؤلفه ها با استفاده از $EventBus در Vue JS How To Share Data Between Components Using $EventBus in Vue JS

• Google Maps Directions API چیست؟ What is Google Maps Directions API?

• درخواست خدمات مسیرها را بدهید و نتایج را در Google Maps ارائه دهید Make A Request To Directions Service & Render The Results On The Google Maps

• نمایش مسیرهای چندگانه جهت مسیر در یک نقشه در گوگل Show Multiple Route Direction Paths On The Google Maps At Once

• با استفاده از InfoWindow نشانگرهای پیش فرض را در آدرس مبدا/مقصد جایگزین کنید Replace Default Markers To Origin/Destination Addresses Using InfoWindow

• نحوه ایجاد Polylines سفارشی در Google Maps API How To Create Custom Polylines in the Google Maps API

• نمایش هر مسیر با رنگ تصادفی شامل برچسب ها، چند خط و غیره. Display Each Route With A Random Color Including Labels, Polyline, etc.

• کد پروژه تکمیل شده را دانلود کنید Download The Completed Project Code

• وقت آن است که آنچه را که در این ماژول آموخته اید آزمایش کنید Time To Test What You've Learned In This Module

• وقت آن است که آنچه را که در این ماژول آموخته اید آزمایش کنید Time To Test What You've Learned In This Module

• زمان بازخورد! Feedback Time!

• زمان بازخورد! Feedback Time!

سخنرانی پاداش Bonus Lecture

• سخنرانی پاداش Bonus Lecture

• اجرا و اجرا با پروژه Vue 3 Up and Running With Vue 3 Project