[پخش موسیقی] 

DAVID J. مالان: سلام. بیایید یک پیاده روی را از طریق مجموعه مسئله 8 Mashup ایجاد، است که رفتن به چالش کشیدن شما به رسم بر عناصر برای نقشه های گوگل با عناصر از اخبار گوگل و مش آنها را با هم به یک اپلت وب است که اجازه می دهد تا کاربر را برای جستجو نقشه برای اخبار محلی به شهرهای خاص، شهرستانها، و کد پستی. برای این کار، ما قصد داریم به ادغام برخی از HTML، CSS، PHP، SQL، جاوا اسکریپت، و یک تکنیک به طور کلی به عنوان AJAX به منظور شناخته شده برای ایجاد این همهجانبه تجربه کاربر. 

بیایید برای اولین بار نقشه های گوگل خود را. این، البته، شاید یک رابط آشنا. اما معلوم است که نقشه های گوگل همچنین یک برنامه API-- فراهم می کند برنامه نویسی interface-- طریق که شما می توانید عناصر نقشه های گوگل را و ادغام آنها را به برنامه های کاربردی خود شما. در واقع، در طول این فرآیند، شما در حال رفتن برای پیدا کردن یک زن و شوهر از آدرس ها به خصوص مفید است که در ذکر خصوصیات مجموعه مسائل 8، به طور خاص این شروع راهنمای و یا راهنمای برنامه را برای نقشه های گوگل API نسخه 3 و همچنین به عنوان API نقشه های گوگل جاوا اسکریپت V3 مرجع است که کمی محرمانه بیشتر به عنوان خوانده شده اما در واقع تمام از سطح پایین تر جزئیات در مورد آنچه توابع و یا روش و اشیاء و خواص و حوادث در واقع با API آمده، در روح و روان بسیار مشابه به [نامفهوم] صفحات. 

حال اگر ما نگاهی در اخبار گوگل، نظر شما شاید یک رابط آشنا اینجا را ببینید. اما معلوم است که شما همچنین می توانید جستجو اخبار گوگل برای جغرافیای خاص از طریق پارامتر HTTP به نام جغرافیایی. در واقع، اگر من در زوم تا اینجا، شما خواهید دید که من در هستم news.google.com/news/section؟geo=02138. و، در واقع، اگر زوم من از، خواهید دید که من هستم به دنبال در یک صفحه با یک دسته کامل از نمایش ها درباره کمبریج، ماساچوست. 

در همین حال، اگر من در واقع تغییر URL به یک کد پستی مثل این، اما چیزی مسیه کمی مانند کمبریج، ماساچوست +، که در آن به همراه راه است شما رمز شخصیت فضا در URL و ضربه را وارد کنید، شما که من در واقع خواهید دید تقریبا اخبار همان را ببینید. شاید آن را کمی متفاوت چون کمبریج واقع دارای کد پستی متعدد. در حال حاضر چگونه می دانم که و، در واقع، چگونه می تواند من به نحوی کراوات شهرستانها و شهرهای کوچک به کدهای پستی در مورد من می خواهم به اجازه می دهد کاربر برای نگاه کردن یا؟ خب، معلوم وجود دارد که وب سایت در خارج وجود دارد به نام geonames.org که است ابتکار به یک پایگاه داده آزادانه در دسترس همه انواع اطلاعات جغرافیایی، نه تنها برای ایالات متحده، بلکه برای دیگر کشورها نیز هست. در واقع، اگر من به این آدرس بروید در اینجا، که همچنین در این مشکل مجموعه ذکر شده خصوصیات، شما آن را سه ببینید فهرستی از یک دسته کامل از فایل های ZIP هر یک از که می تواند توسط شما دانلود شده است. در واقع، برای این مشکل تنظیم شما در حال رفتن به دانلود us.zip. در حال حاضر در این فایل، یک کل است دسته از داده ها در فرمت متن. فایل های بسیار شبیه به یک CSV-- کاما ارزش جدا file-- اما در واقع با استفاده از زبانه ها به متمم زمینه. در حال حاضر، در عین حال، اگر شما نگاه کنید در اینجا آنچه که من در برجسته ام، این مقادیر در این فایل می رویم به چیزهایی مانند کدهای کشور، کد پستی، نام محل، و پس از آن، در بعضی از فرم و یا دیگر، ایالات و نواحی، جوامع، و بیشتر. در واقع، من در حال حاضر دانلود این فایل در پیش است. اجازه بدهید پیش بروید و آن را باز کنید here-- us.text-- و، در واقع، نظر شما ببینید اگر من پایین به خط 16792 شما چند پرونده برای کمبریج خواهید دید، ماساچوست و کدهای مختلف فایل های فشرده خود را. شهرستان چه شما همچنین نگاه کنید به وجود است، برخی از اعداد است که من واقعا نمی درک، بلکه همه راه در سمت راست، برخی از GPS coordinates-- طول و عرض جغرافیایی. این فوق العاده است به خاطر یکی از از ویژگی های نقشه های گوگل API توانایی تشخیص است که در آن شما می لحاظ جغرافیایی از نظر مختصات GPS. 

حالا اجازه دهید شروع به شکل از چگونه به شروع گره زدن این کارها با هم. ما به شما داده ام یک کل دسته از کد توزیع، و همچنین پایگاه داده MySQL. در واقع، اگر من کشیدن از phpMyAdmin داشتن در حال حاضر وارد شده، به عنوان شما را به زودی خواهد شد، pset8.SQL، شما یک جدول MySQL دید که به نظر می رسد مثل این، یک میدان ID، کشور کد، کد پستی، نام محل و بیشتر. انواع تمام کسانی که ستون من مشتق شده به سادگی با خواندن readme.text فایل اینجا که مشخص آیا درست یک عدد صحیح است، و یا varchar و یا مانند آن. 

بنابراین ما که جدول برای ایجاد کرده اید شما و با توجه به شما دستورات SQL برای اجرای برای ایجاد که جدول در پایگاه داده خود را، اما در واقع وجود ندارد داده ها در آن است. در عوض، شما در حال رفتن به به دانلود us.zip یا پستی هر کشور فایل را از که URL وجود دارد. و پس از آن شما به به ارسال یک اسکریپت خط فرمان در پی اچ پی که رفتن به باز کردن آن متن فایل، تکرار بیش از خطوط آن، و سپس برای هر یک از کسانی که خطوط انجام دادن به که مکان جدول در پایگاه داده MySQL خود را. بنابراین در پایان این فرایند، نظر شما که اسکریپت را اجرا نهایت فقط یک بار در تئوری. در واقع شما احتمالا آن را اجرا کنید یک دسته از بار در حالی که تلاش برای رفع اشکالات مختلف. 

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

در حال حاضر، در عین حال، در سمت چپ بالا هستند برخی از کنترل های آشنا نقشه های گوگل به شما اجازه می زوم کردن، پان بالا، پایین، چپ، و راست، بلکه یک جعبه جستجو که ما می شود وجود دارد. بنابراین اگر برای، رک و پوست کنده را جستجو کنم، تنها کد پستی دیگر من می دانم، 90210، ما در واقع خواهید دید بورلی هیلز، کالیفرنیا. زمانی که کلیک آن را به من منجر به کالیفرنیا و یک دسته کامل اخبار در مورد بورلی هیلز. در حال حاضر متوجه، بیش از حد، چه وجود دارد اتفاق افتاده است. اگر من این جستجو زمان برای 02138 و یا حتی کمبریج کاما ماساچوست و یا برخی از نوع آن، شما کرکره های autocomplete کم است. در حال حاضر این است با استفاده از یک افزونه برای یک کتابخانه به نام جی کوئری، و پلاگین است typeahead نامیده می شود. ما به سادگی از طریق به عنوان خوانده شده اسناد و مدارک، دانلود .js فایل یکپارچه به کد توزیع به طوری که شما در نهایت می توانید کد ارسال که پر که منو کرکره با خودکار انتخاب و یا پیشنهادات خودرو. 

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

بیایید نگاهی سپس در کد توزیع. هنگامی که شما دانلود کرده اید pset8.zip و استخراج به دایرکتوری vhost شما در CS50 لوازم خانگی، شما این را ببینید دایرکتوری اینجا داخل. Bin-- که به طور کلی برای ایستد دودویی برای programs-- اجرایی شامل، به عنوان در pset7، برخی از پی اچ پی فایل هایی که فایل های دیگر عبارتند از، سپس عمومی، که فایل هایی که نیاز قابل دسترس عمومی به یک کاربر با یک مرورگر. بیایید نگاهی در دایرکتوری بن، و ما ببینید که یک فایل وجود دارد وجود دارد در حال حاضر به نام واردات. اگر ما این کار را با جیادیت باز، خواهیم دید که، متاسفانه، بسیار وجود ندارد وجود دارد. همه این است که وجود دارد، هر چند، ابتکار در بالا است که مشخص است که interpreter-- در این مورد PHP-- باید به واقع استفاده اجرای این فایل. اما پس از آن که در آن می گوید TODO است که در آن شما هستید رفتن به نیاز به ارسال برخی از کد که احتمالا نیاز به پیکربندی فایل که در شامل دایرکتوری همانطور که قبلا با فایل های پی اچ پی انجام داده ام. و پس از آن شما به باید به نحوی باز کردن us.text که احتمالا شما در حال حاضر استخراج کرده اند. سپس شما به به تکرار بیش از خطوط را در آن فایل، شاید با استفاده از برخی از توابع پیشنهاد در مشخصات. سپس هر یک از این وارد خطوط به پایگاه داده MySQL با استفاده از تابع پرس و جو، که ما دوباره شما with-- ارائه کرده ام یا حداقل یک نوع آن در functions.php قرار، که ما در یک لحظه را ببینید. 

حالا اجازه دهید واردات بستن و بازگشت به دایرکتوری ما و این بار رفتن به شامل. و اگر من LS وجود دارد، شما خواهید دید سه فایل کاملا مانند مجموعه مسائل 7. و اجازه دهید نگاهی سریع، به عنوان مثال، در فایل config.php. در آن وجود دارد، خطوط کمتر است از قبل، و آن به نظر می رسد این فایل شامل constants.php و functions.php قرار. ما در حال استفاده از یک کمی متفاوت روش این زمان در اطراف به واقع مشخص است که این فایل ها نسبت می به دایرکتوری جاری __ DIR__ نشان دهنده هر دایرکتوری این فایل، فایل config.php، خود را در است. پس این است که بیشتر راه صریح مشخص چه فایل های دیگر شما می خواهید به نیاز. 

در حال حاضر اگر من این فایل را ببندید و باز کردن constants.php در عوض، شما یک فایل خواهید دید بسیار یادآور به مجموعه مسائل 7 دهند، گرچه با یک پایگاه داده های مختلف به نام pset8. در نهایت، در functions.php قرار، ما فقط یک تابع را ببینید این بار به نام پرس و جو. این است که تقریبا همان به جز ما رسیدگی خطاهای این زمان در اطراف یک کمی متفاوت است، اما استفاده از است همان است که در مشکل تنظیم هفت. 

در حال حاضر اجازه بازگشت به pset8 ما دایرکتوری، رفتن به عمومی، و در وجود دارد اگر من LS، خواهید دید this-- articles.php، ها index.html، search.php می، و update.php-- تمام فایل های. و سپس فونت CSS، IMG، و دایرکتوری جی اس کاملا مانند pset7. 

بیایید نگاهی به ها index.html، که رفتن به واقعا می شود نقطه ورود به smashup. در حال حاضر در ها index.html، شما یک کل را ببینید دسته از عناصر لینک در سر، به طور خاص، برای خود راه انداز برای خود ما CSS به دنبال یک دسته کامل از اسکریپت برچسب ها برای چیزهایی مانند نقشه ها، API خود را، یک نشانگر خاص با برچسب نرم افزاری است که ما در ذکر مشخصات در دسترس شما است، جی کوئری خود را، خود راه انداز خود را، و یکی دیگر از کتابخانه نام زیرین که ما در مورد در تنظیمات صحبت کنید. Underscore.js مانند jquery.js یک کتابخانه جاوا اسکریپت است است که یک دسته کامل از قابلیت های که بسیاری از مردم در آرزوی جهان در خود جاوا اسکریپت وجود داشته است. بنابراین تمام این هستند در واقع کاملا مردمی. ما همچنین typeahead ذکر کرده ام است که کتابخانه که می کند که کرکره های autocomplete و در نهایت یک لینک به جاوا اسکریپت خود ما. 

در همین حال، و شاید خوشبختانه، این ترکیب توسط نسبتا کمی رانده HTML را در اینجا در پایین. توجه کنید که ما یک div در مشخص کرده ام بدن ما از مایع کلاس-ظرف. این، خود راه انداز در را اسناد و مدارک، فقط بدان معنی است که این DIV است که برای پر کردن دید و یا پنجره مرورگر به طور کامل. 

در همین حال، در زیر است که ما یک DIV که باز و بلافاصله بسته با ID منحصر به فرد از نقشه بوم. این شرکت از گوگل است مستندات نقشه برای API های آن، به موجب آن من به سادگی نیاز به یک DIV خالی را که برای تزریق، در نهایت، نقشه های واقعی گوگل. اما بیشتر در مورد که در فقط یک کمی. 

در نهایت، یک فرم وجود دارد در داخل از اینجا که پیاده سازی جعبه متن تا بالا سمت چپ در رابط ما برای جستجو. توجه کنید که ما استفاده کرده ایم یک بیت از خود راه انداز در اینجا too-- چیزهایی مانند فرم های درون خطی و فرم گروه. ما سابق داده ام ID منحصر به فرد از فرم. و پس از آن، در نهایت، من در واقع نوع ورودی، که بسیار آشنا، که ID پرسش است. فقط یک قرارداد. Q برای query-- می تواند داشته باشد هر چیزی به نام شده است. و پس از آن حفره یا سوراخ، در همین حال، شهرستان، دولت است، و کد پستی که شما ممکن است به خاطر دیدن در ترکیب ما نسخه ی نمایشی پیش از آن. بیایید این فایل را ببندید. 

در حال حاضر یک نگاهی به فایل های پی اچ پی را که انتظار و پس از آن فایل های جاوا اسکریپت. در فایل های پی اچ پی ما، ما در حال حاضر برای شما اجرا، به عنوان مثال، به روز رسانی. Update.php-- ما نمی خواهد صرف بزرگ مقدار زمان در here-- به طور خلاصه فایل است که ما کد جاوا اسکریپت است که از طریق AJAX برای تماس با که روش آسنکرون که ساخته شده را به جاوا اسکریپت این روزها که رفتن به ما اجازه می دهد به درخواست update.php برای اطلاعات بیشتر. 

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

در همین حال، در articles.php، یکی دیگر از است فایل ما در تمامیت خود را نوشته ام. این در روح بسیار شبیه به است تابع گرین کارت آمریکا مجموعه مسائل 7، که یاهو مالی را برای شما تماس. این فایل اطلاعات تماس اخبار گوگل برای شما، در نهایت گرفتن یک ماشین قابل خواندن version-- در چیزی نام RSS format-- اخبار برای کمبریج یا بورلی هیلز یا هر شهر شما جستجو کرده اید برای در که geoparameter است. ما تجزیه که RSS، که فقط یک نوع زبان نشانه گذاری به نام XML، و سپس ما در واقع بازگشت آن را به مرورگر شما و به کد جاوا اسکریپت خود را، به طور خاص، در یک قالب به نام JSON، جاوا اسکریپت نشانه گذاری شی. در حال حاضر شما در دیدن specification-- ما به شما اشاره چگونه شما در واقع می توانید ببینید برخی از back-- آینده JSON که این قابلیت در نهایت اجازه می دهد کسانی که منو شما جمعیت تا که هنگامی که شما کلیک کنید در یک نشانگر در نقشه شما در واقع یک دسته کامل را ببینید گلوله، که هر کدام لینک به یک مقاله. 

حالا اجازه دهید نگاهی به یکی از آخرین فایل پی اچ پی که، خوشبختانه، نمی بسیار on-- رفتن فقط یک TODO بسیار بزرگ است. در حال حاضر این فایل اعلام یک آرایه به نام مکان. و سپس در نهایت چاپ که آرایه در format-- JSON بسیار-چاپ آن را فقط به طوری که همه چیز آسان تر به اشکال زدایی. متاسفانه، در وسط است که از این TODO وجود دارد، که خواستار برای شما به جستجو پایگاه داده برای مکان های تطبیق جغرافیایی HTTP پارامتر. 

و، در واقع، این است که رفتن به یکی از challenges-- شما برای پیاده سازی این قابلیت در اینجا به طوری که وقتی با این فایل با شما URL مانند جستجو. پی اچ پی؟ جغرافیایی = چیزی، کد خود را در نهایت باز خواهد گشت JSON مجموعه ای از تمام مکانهای در خود جدول پایگاه داده که مطابقت ورودی. بنابراین اگر نوع کاربر در کمبریج، فایل های خود را در اینجا search.php می باید در نهایت بازگشت یک آرایه JSON برای همه از مسابقات برای کمبریج، که ممکن است در ماساچوست است اما می تواند حتی هر جای دیگر. 

در نهایت، اجازه دهید نگاهی به دو فایل های که ultimately-- شخص فایل CSS خود را و فایل جاوا اسکریپت خود را. اگر من به دایرکتوری CSS ما بروید، یک دسته کامل از فایل های وجود دارد وجود دارد، اما بسیاری از آنها کتابخانه می باشد. من قصد دارم به نگاهی، به طور خاص، در CSS قرار، که ما CSS جهانی خود که است رفتن به سبک خاصی دراوردن کل این ترکیب. من آن را ترک به شما را به خواندن از طریق نظرات در اینجا، اما، به طور خلاصه، این CSS که تضمین می کند که است ما ترکیب، به طور پیش فرض از جعبه، به نظر می رسد دقیقا راه ما it-- می خواهید با نقشه پر کردن پورت مشخصات و با جستجو جعبه تا در بالا سمت چپ. ما همچنین آزادی گرفته شده stylizing که کرکره typeahead منو کمی نیز هست. 

فایل مهم ترین شاید برای این مشکل تنظیم این یکی از آخرین، scripts.js است. داخل دایرکتوری JS خود را فایل حتی بیشتر است. همه آنها فایل های کتابخانه ای می باشد جز این یکی، scripts.js. اگر ما این باز کردن، اجازه دهید ما تور نهایی از طریق توابع که به این فایل ساخته شده برای شما و توجه تماس به TODOs که پیش رو است. 

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

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

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

در نهایت، در اینجا ما ثبت نام چه شنونده به نام. فکر می کنم راه back--، راه back-- به هفته صفر در CS50 هنگامی که ما در ابتدا نگاه کرد و حمایت خود را از طریق پیاده روی از طریق برای چیزهایی به نام حوادث و پخش. شما ممکن است استفاده نمی کرده اند خودتان آن را، اما آن را یک مکانیسم موجب آن مرورگر در این مورد می تواند توجه ما را دریافت کنید زمانی که آن را آماده به واقع برخی از کد را اجرا کند. در این مورد، آن را به گوش دادن به نقشه برای یک رویداد به نام بیکار. این بدان معنی است که مرورگر است بارگذاری نقشه گوگل به پایان رسید. در این مرحله یک تابع به نام باید پیکربندی نهایت اعدام شوند. این تابع، پیکربندی، خواهیم دید، است که توسط ما نوشته شده است. 

در حال حاضر در اینجا یک تابع است که، متاسفانه، تنها یک شاخص TODO اضافه کنید. میانگین پستها در طول تنظیمات. شما در حال رفتن به نیاز برای نوشتن کد است که در واقع می افزاید: marker-- که آیا آن را به نظر می رسد مثل یک روزنامه یا یک رویه انگشت شست، و یا چیزی else-- به نقشه گوگل. در اینجا اکنون که تابع است نام پیکربندی. من آن را ترک به شما به عنوان خوانده شده از طریق این در جزئیات بیشتر، اما متوجه است که ما اضافه کنید شنوندگان دسته تر به طوری که ما می توانیم کد اجرا زمانی که کاربر روی و کشیدن نقشه. ما همچنین کد در اینجا است که مقدار دهی اولیه که پلاگین typeahead به طوری که کرکره منو در واقع کار می کند. 

اما اجازه دهید تمرکز بر روی یک زن و شوهر از مکان های اینجا. به طور خاص، این به اینجا. من به آنلاین تسلیم اسناد و مدارک و مشخصات برای نحوه پر کردن در این TODO. اما به طور خلاصه، این کتابخانه typeahead شما اجازه می دهد به تصویب در چه به طور کلی به عنوان یک الگو شناخته شده است، که تا به برخی از متغیرهایی متغیر در روح به٪ printf را بسیار مشابه است. * است. اما در این مورد، قالب برای هر تنظیمات اجازه می دهد تا شما را مشخص چه متغیر می خواهید برای تزریق از داده که آمده بازگشت از چیزی شبیه به پی اچ پی فایل های که شما نوشته اید که ساطع خروجی JSON. 

در حال حاضر در اینجا متوجه است که ما گوش دادن برای انتخاب typeahead زمانی که کاربر در واقع انجام جستجو و انتخاب یک مقدار. این است که ما چگونه در واقع هستید برای رفتن به آن گوش می و اجرای برخی از کد به عنوان یک نتیجه. سپس ما همچنان به پیکربندی ترکیب فقط کمی. و، در نهایت، ما تماس بگیرید این به روز رسانی عملکرد. این به روز رسانی نشانگر بر روی صفحه نمایش. بیشتر در که در یک لحظه. در همین حال، چند وجود دارد توابع کوچک در اینجا. که یکی از آنها hideInfo است که به سادگی می بندد InfoWindow. تابع دیگر در اینجا، که در نهایت نمی خواهد بیش از حد طولانی، حذف نشانگر. که رفتن به خنثیسازی هر اضافه کردن تابع نشانگر خود را انجام می دهد. و پس از آن را در اینجا جستجو می باشد. و این یکی جالب است چون ما کد جاوا اسکریپت است که نوشته شده اند رفتن به صحبت به search.php می در سرور و به عقب بر گردیم برخی از پاسخ. 

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

حالا اجازه دهید در آخرین نگاه زن و شوهر از توابع در این فایل. در اینجا یک تابع است نام showInfo، که نشان می دهد اطلاعات در یکی از آن پنجره اطلاعات کمی که بالا میآید وقتی که کاربر کلیک نشانگر. در اینجا بیشتر است که تابع به روز رسانی که ما برای شما اجرا شود. این از مرزهای نقشه مشخص می کند. مختصات GPS از چیست آن شمال شرق و گوشه جنوب غربی در اینجا. ما برخی از پارامترهای HDP آماده ام در اینجا و سپس آنها را در نهایت به تصویب رسید به update.php، که ما کرده ایم همچنین برای شما اجرا شود. که در نهایت می شود بازگشت برخی از JSON از فایلی به نام update.php و پس از آن حذف هر نشانگر بر روی صفحه نمایش و پس از آن بیش از تکرار داده که دوباره از update.php، که دوباره فقط یک آرایه JSON است. و سپس آن را در نهایت می افزاید یک شاخص برای هر یک از این مکان ها، دست زدن به شکست یا خطاهای که ممکن است به خوبی اتفاق می افتد. 

در حال حاضر فقط به شما یک طعم و مزه چگونه شما را ممکن است در مورد اشکال زدایی این پروژه بروید، متوجه است که من در را باز کرده ام پیشبرد این برگه در اینجا به این URL، pset8 / articles.php؟ جغرافیایی = 02138. در حال حاضر، دوباره، مقالات در مورد پی اچ پی ما را برای شما اجرا بنابراین این بسیار نیست آنچه شما خواهید بود با استفاده از برای اشکالزدایی، بلکه روش. توجه کنید که من برای جستجو کرده ام کد پستی کمبریج در اینجا، و من پشت بدست، در واقع، یک JSON مجموعه ای از JSON اشیاء که در داخل آن دو لینک keys-- و عنوان. 

بنابراین این قابلیت با این نسخهها کار در حال حاضر برای شما. اما این روش از دستی رفتن به URL مثل این چیزی شبیه به search.php می؟ جغرافیایی = کمبریج یا 02138 یا هر کاربر در تایپ باید اثبات ارزشمند به شما به عنوان، به خودتان، سعی کنید به شکل دقیقا یا چرا search.php می در حال کار است یا نه. 

در نهایت پس از آن، شما باید چند TODOs پیش از شما. شما در حال رفتن به ادوات اول که اسکریپت واردات که بار خوانده شده در us.text به پایگاه داده خود را. شما پس از آن نیاز به رفتن به برای پیاده سازی search.php می به طوری که آن رفتار دقیقا به عنوان مشخص شده است. شما سپس رفتن به خواهید به scripts.js تمرکز و در نهایت پیاده سازی کسانی که زن و شوهر از TODOs، از جمله برای پیکربندی و الگو، اضافه کردن نشانگر، حذف نشانگر، و سپس آخرین، اما نه کم، یک تماس های شخصی. 

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

[پخش موسیقی]