چگونه از API یاهو مپ برای رسم خطوط بر روی نقشه استفاده کنیم؟
کلا، این API که میگن چیه؟
خیلی ساده، API مستندی ست که مثلا یاهو یا گوگل درباره ی سرویس هایشان (نقشه، جست و جو، فیدبرنر، فلیکر، دلیشز و …) در اختیار ِ من، تو و ملت می گذارند تا ما با استفاده از این مستندات بتوانیم برنامه ی تحت ِ وب ِ به درد بخوری بنویسیم.
اینکه یک اپلیکشن چه باشد و چه از آب در بیاید بستگی به “ذهن زیبا”ی شما برای طرح صورت مساله و کمی پشتکار برای ادامه ی پروسه دارد. مثلا، آقای “توسعه دهنده” اپلکیشنی می نویسد که بتواند ورزشگاههایی که قرار است میزبانی ِ تیم های فوتبال حاضر در جام جهانی ۲۰۱۰ را بر عهده بگیرند بر روی گوگل مپ مشخص کند، با امکانات اضافه!
محبوب ترین API ها برای ساختن یک Mashup* : طبق آمار ِ programmableweb.com
خوشبختانه یا متاسفانه، گستردگی API گوگل مپ اصلا قابل مقایسه با API یاهو مپ نیست. و قاعدتا مقاله های به درد بخوری هم که برای آموزش استفاده از API یاهو مپ در سطح اینترنت وجود دارد بسیار بسیار ناچیز است در مقابل ِ مثال های مشابه گوگلی. اما به ناچار، فعلا، و به دلیل تحریماتی که گوگل علیه کاربران ایرانی در نظر گرفته است از یاهو مپ مثال میزنم.
مثال با استفاده از یاهو مپ
در این مثال، با استفاده از مستنداتی که یاهو مپ در اختیارمان قرار داده است، و با استفاده از کلاس Marker چهار شهر را بر روی نقشه علامت می زنیم و با استفاده از خطوطی این نقاط را به هم متصل می کنیم. نتیجه ی کارم را می توانید هم از این آدرس و هم از تصویر زیر مشاهده کنید:
یاهو برای این کار هم امکان استفاده از Flash را در اختیار شما گذارده است و هم Ajax، که من از Ajax استفاده کردم.
چه اتفاقی قرار است بیافتد؟
شما همه ی کار را می توانید در یک فایل php انجام دهید اما من برای باکلاس تر شدن ِ کارم، فایلی که کدها را در آن نوشته بودم به ۵ قسمت تقسیم کردم و به هر کدام وظایفی محول کردم. ببینید:
گمانم داستان مشخص باشد که از چه قرار است. یک فایل اندیس دارم که چهار فایل را فراخوانی می کند: Header.php (برای دستکاری تیتر)، Footer.php (برای دستکاری ِ پانوشت)، Style.css (برای دستکاری فرمت ِ محتوی) و Script.php (کدی که با استفاده مستندات یاهو مپ نوشتم).
در فایل Script.php چه خبر است؟
function startMap(){
// Add the ability to change between Sat, Hybrid, and Regular Maps
map.addTypeControl();
// Add the zoom control. Long specifies a Slider versus a "+" and "-" zoom control
map.addZoomLong();
// Default map to satellite (YAHOO_MAP_SAT) -- other opts: YAHOO_MAP_HYB, YAHOO_MAP_REG
map.setMapType(YAHOO_MAP_REG);
// Add the Pan control to have North, South, East and West directional control
map.addPanControl();
// Specifying the Map starting location and zoom level
map.drawZoomAndCenter("Roswell, New Mexico, USA", 13);
در کد بالا: ابتدا تابعی را تعریف می کنیم. سپس قابلیت تغییر حالات تماشا را به نقشه مان می افزاییم (منظور حالات نمایش به صورت ماهواره ایی یا مثلا به صورت نقشه ساده است). قابلیت زوم را هم به امکانات نقشه مان اضافه می کنیم. حالا می خواهیم برای نقشه یک حالت پیش فرض انتخاب کنیم که من حالت نقشه ایی ساده را انتخاب کردم.
بعد از آن، قابلیتی برای کنترل نقشه تعریف می کنیم تا کاربر احساس راحتی کند! حالا می خواهیم به نقشه مان نقطه ایی مرکزی بدهیم به طوری که چهار نقطه ی مشخصمان در نقشه به صورت پیش فرض قابل رویت باشد. برای اینکار شهری را که در بین این چهار نقطه قرار داشت به متدمان تزریق کردم (به فرمت ِ قرار گیری نام خیابان، شهر، ایالت و کشور دقت کنید). پارامتر بعدی این متد، عددی ست که مشخص می کند به صورت پیش فرض تا چه حد نقشه زوم داشته باشد.
// Create Marker
map.addMarker("Dallas, USA");
map.addMarker("Denver, USA");
map.addMarker("San Antonio, USA");
map.addMarker("Tucson, USA");
خب! در اینجا من با استفاده از متد ِ addMarker چهار شهر را که قرار است بعدا با خطوطی به یکدیگر متصل کنم علامت زدم. علامت هم، همان پنجره ی کوچک ِ نارنجی رنگی ست که بالای نقاط می بینید.
// Set latitude and longitude
var cPT1 = new YGeoPoint(32.8030,-96.7699);
var cPT2 = new YGeoPoint(39.7616,-104.9622);
var cPT3 = new YGeoPoint(29.4241,-98.4936);
var cPT4 = new YGeoPoint(32.2217,-110.9265);
// args: array of pts, color, width, alpha
// Drawing frist poly
var poly1 = new YPolyline([cPT1,cPT2],'#001A80',5,0.7);
map.addOverlay(poly1);
// Drawing second poly
var poly2 = new YPolyline([cPT3,cPT4],'#004D4D',5,0.7);
map.addOverlay(poly2);
}
در قسمت انتهای کد، باید با خطوطی این نقاط را به یکدیگر متصل کنم. برای اینکار به طول و عرض جغرافیایی احتیاج خواهم داشت. برای بدست آورد طول و عرض جغرافیایی از این سایت استفاده کنید.
حالا چهار متغیر برای چهار نقطه مان تعریف می کنیم. درون این متغیرها طول و عرض جغرافیایی ۴ شهر ما می نشیند. حالا از YPolyline استفاده می کنیم تا خطی با نقطه ی تعریف شده، رنگ و سایر خصوصیات به متغیری دیگر تحویل دهیم و در نهایت با استفاده از متد addOverlay کار را تمام می کنیم.
تمام شد! حاصل کار همان می شود که اینجا دیدید.
واضح است که شما باید آشنایی، کلا، با برنامه نویسی داشته باشید وگرنه نمی توانید از مثال های یاهو سر در بیاورید. کما اینکه، خودم برای سر در آوردن از مثال های یاهو کلی وقت گذراندم و دردسر کشیدم. البته همانطور که قبلا هم گفتم با توجه به گستردگی مثال و آموزش هایی که برای گوگل مپ وجود دارد، استفاده از API گوگل مپ بسیار ساده تر است.
منابعی که می توانید استفاده کنید: رفرنس API یاهو مپ – مثال های یاهو برای استفاده از API یاهو مپ – مقاله ی Webmonkey
* در واقع Mashup ها سایت هایی هستند که با استفاده ی ترکیبی از API ها ساخته می شوند.
**استفاده از این کدها برای ویرایش، کپی، تکثیر و غیره آزاد است. برای دانلود مثال اینجا کلیک کنید.
