بخش مقالات آکادمی | Articles
آخرین آموزش ها

در حالت استاندارد نقشه های گوگل یکسری امکانات پیشفرض برای کنترل نقشه در اختیار ما قرار داره. در Google Maps – قسمت پنجم قصد داریم که از امکانات بیشتری استفاده کنیم.
نکته: توجه داشته باشین که کدهای گفته شده در مقاله ها رو در ویرایشگر متن وارد کنید و اون هارو اجرا کنین تا نتیجه رو مشاهده کنین. راحتترین روش برای اینکار، کدها رو در Nodepad وارد کنین و فایل اونو با فرمت html. ذخیره کنین و بعد اونو با مرورگرتون اجرا کنین تا تغییرات انجام شده رو مشاهده کنین.

کنترل های پیشفرض:

ابتدا باهم بررسی میکنیم که کنترل های پیشفرض Google Maps شامل چه چیزهایی میشه:

  • zoom: نمایش یک اسلایدر یک کلید “+/ –” برای کنترل سطح بزرگنمایی نقشه
  • pan: نمایش یک پنل کنترل برای سوژه های متحرک
  • MapType: این کنترل به کابران اجازه میده بین دو نوع نقشه (نقشه جاده و ماهواره) تغییر وضعیت بدن.
  • Street view: نمایش یک آیکون آدمک که با کشیدن اون و قرار دادنش در هر جای نقشه حالت نمایش خیابانی فعال میشه.

کنترل های بیشتر:

به علاوه کنترل های گفته شده به امکانات نقشه های گوگل در زیر میشه اشاره کرد:

  • Scale: نمایش عنصر مقیاس نقشه
  • Rotate: نمایش یک آیکون دایره ایی که به اجازه چرخوندن نقشه رو میده
  • Overview: نمایش کوچکی برای بررسی اجمالی نقشه

برای اینکه امکانات مشخصی برای کنترل نقشه نمایش داده بشه باید هنگام ایجاد نقشه داخل MapOptions یا به وسیله فراخوانی تابع ()setOptions امکانات نقشه رو تعویض کنین.

غیرفعال کردن کنترل پیشفرض:

شاید شما تمایل داشته باشید که امکانات پیشفرض نقشه رو غیر فعال کنید. برای اینکار باید ویژگی disableDefaultUI نقشه رو به true تنظیم کنید.

disableDefaultUI:true

فعال کردن تمام کنترل ها:

بسیاری از کنترل کننده های نقشه در Google Map پس از ایجاد شدن به صورت پیش فرض ظاهر میشوند در حالی که بعضی از اون ها در دسترس نیستند مگر اینکه خودتون تنظیم کرده باشین تا نمایش داده بشن. اضافه یا کم کردن کنترل ها در نقشه توسط شیئ Map options مشخص می شود. با تنظیم کردن این شیئ به true یا fulse این کنترل هارو به ترتیب نمایان و مخفی میکند. در کد مثال زیر تمام کنترل ها فعال هستند.

panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true

اصلاح کنترل ها:

تعدادی از کنترل های نقشه قابل تنظیم هستند. کنترل ها رو با مشخص نمودن زمینه control options میتونیم اصلاح کنیم. برای مثال اگر قصد اصلاح بزرگنمایی یک کنترل رو داشته باشیم باید به صورت zoomControlOptions تعریف کنیم. این اصلاح زمینه شامل محتوای زیر میباشد:

  • google.maps.ZoomControlStyle.SMALL: نمایش کنترل یک مینی زوم. یعنی فقط کلید های + یا -.
  •  google.maps.ZoomControlStyle.LARGE: نمایش کنترل زوم استاندارد یا اسلایدر
  •  google.maps.MapTypeControlStyle.DEFAULT: نمایش پیشفرض بسته به اندازه تصویر کاربر

zoomControl:true,
zoomControlOptions: {
 style:google.maps.ZoomControlStyle.SMALL
}

توجه داشته باشید که اگر شما یک کنترل را اصلاح کنید، همیشه کنترل در ابتدا فعال میمونه. کنترل دیگری که قابل اصلاح است MapType می باشد. اصلاح گزینه ها توسط  mapTypeControlOptions مشخص میشود و این فیلد حاوی امکانات زیر است:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR: نمایش یک کلید برای هر نوع نقشه
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU: انتخاب نوع نقشه به وسیله منوی dropdown.
  • google.maps.MapTypeControlStyle.DEFAULT: نمایش پیشفرض بسته به اندازه تصویر کاربر.

mapTypeControl:true,
mapTypeControlOptions: {
    style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
}

همچنین توسط ویژگی ControlPosition می توان موقعیت یک کنترل رو تعیین کنید.

mapTypeControl:true,
mapTypeControlOptions: {
    style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
    position:google.maps.ControlPosition.TOP_CENTER
}

کنترل سفارشی:

برای اینکه یک کنترل سفارشی ایجاد کنیم تا از هرجای نقشه که رفتیم به یک مکان توسط یک کلیک بازگردیم، تغییرات زیر را اعمال میکنیم:

controlDiv.style.padding =’5px’;
var controlUI = document.createElement(‘div’);
controlUI.style.backgroundColor = ‘yellow’;
controlUI.style.border=’1px solid’;
controlUI.style.cursor =’pointer’;
controlUI.style.textAlign =’center’;
controlUI.title = ‘Set map to Tehran’;
controlDiv.appendChild(controlUI);
var controlText = document.createElement(‘div’);
controlText.style.fontFamily=’Arial,sans-serif’;
controlText.style.fontSize=’12px’;
controlText.style.paddingLeft = ‘4px’;
controlText.style.paddingRight = ‘4px’;
controlText.innerHTML ='<b>Home<b>’
controlUI.appendChild(controlText);

به پایان این قسمت از سری مقالات Google Maps رسیدیم. از همراهی شما متشکریم.

تاریخ ارسال
11 خرداد 1395
ارسال شده توسط
محمدرضا تناکیان
میزان بازدید
0 نفر بازدیدکننده
0 دیدگاه
فایلی جهت دانلود وجود ندارد !
مشخصات
حجم و فرمت :

0 دیدگاه ثبت شده

شما هم نظری بدهید
هنوز دیدگاهی ثبت نشده
توجه فرمایید:
نظرات شما پس از بررسی و تایید نمایش داده می شود.
لطفا نظرات خود را فقط در مورد مطلب بالا ارسال کنید.