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

در مقالات قبل Google Maps باهم بررسی کردیم که چطوری در صفحه وب خودمون یک نقشه قرار بدیم. در مقاله Google Maps – قسمت سوم باهم از امکان دیگری در Google Maps رو بهره ببریم.

نکته: توجه داشته باشین که کدهای گفته شده در مقاله ها رو در ویرایشگر متن وارد کنید و اون هارو اجرا کنین تا نتیجه رو مشاهده کنین. راحتترین روش برای اینکار، کدها رو در Notepad وارد کنین و فایل اونو با فرمت html. ذخیره کنین و بعد اونو با مرورگرتون اجرا کنین تا تغییرات انجام شده رو مشاهده کنین.

Google Maps – Overlays:

Overlays به معنی پوشش می باشد. Overlays اشیائی روی نفشه که ملزم به مختصات طول و عرض جغرافیایی هستند. Google Maps چندین نوع پوشش مختلف دارد:

  • Marker – مکان منحصربفرد روی نقشه. مارکرها میتونن یک آیکون سفارشی رو نمایش بدن.
  • (چند خطی)Polyline –  مجموعه ایی از خطوط مستقیم روی یک نقشه می باشد.
  • (چند ضلعی)Polygon – مجموعه ایی از خطوط مستقیم زوی یک نقشه که تشکیل یک شکل بسته رو میدن.
  • Circle و Rectangle – دایره و مستطیل
  • Info Windows – مجتوا و توضیحاتی در مورد یک نقطه داخل یک بالن بالای اون نقطه نمایش میده.
  • پوشش سفارشی

افزودن یک Marker:

توسط یک سازنده Marker یک مارکر ایجاد میکنیم. توجه داشته باشین که ویژگی موقعیت مارکر باید برای اون تنظیم بشه. متدی که یک مارکر ایجاد میکنه در زیر اومده:

var marker=newgoogle.maps.Marker({
  position:myCenter,
  });
marker.setMap(map);

متحرک کردن Marker:

کد مثال زیر نشون دهنده اینه که چطوری یک مارکر رو متحرک کنیم.

var marker=newgoogle.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
  });
marker.setMap(map);

استفاده آیکون بجای Marker:

همچنین مثال زیر استفاده از تصویر ایکون بجای مارکر پیشفرض رو توضیح میده:

var marker=newgoogle.maps.Marker({
  position:myCenter,
  icon:’pinkball.png’
  });

marker.setMap(map);

Polyline در Google Maps:

یک Polyline یک خطی که از بین مجموعه مختصات در جمله دستور اومده، کشیده میشه. یک Polyline از ویژگی های زیر پیروی میکنه:

  • path – چندین مختصات طول و عرض برای خط مشخص میکنه
  • strokeColor – مشخص کننده رنگ هگزادسیمالی برای خط هست. مانند فرمت: FFFFFF#
  • strokeOpacity – غلظت رنگ خط رو مشخص میکنه. و ارزش اون بین 0.0 تا 1.0 قابل تغییره.
  • strokeWeight – عرض خط رو در واحد پیکسل مشخص میکنه.
  • editable – قابل تغییر بودن خط توسط کاربران رو تعیین میکنه.( true / false )

var myTrip = [stavanger,amsterdam,london];
var flightPath = newgoogle.maps.Polyline({
  path:myTrip,
  strokeColor:”#0000FF”,
  strokeOpacity:0.8,
  strokeWeight:2
});

Polygon در Google Maps:

یک Polygon شبیه به Polyline از مجموعه مختصاتی که در جمله دستور اومده، تشکیل شده با این تفاوت که از آن برای تعیین یک منطقه در یک حلقه بسته طراحی میشن. Polygon ها از چند خط مستقیم بسته که تشکیل یک شکل رو میدن ، ساخته شدند. یک Polygon از ویژگی های زیر پیروی می کنند:

  • path – چندین مختصات طول و عرض رو برای خط مشخص میکنه. مختصات ابتدا و انتها برابرند.
  • strokeColor – رنگ هگزادسیمالی رو برای خط مشخص میکنه. با فرمت: FFFFFF#
  • strokeOpacity – مشخص کننده اثر غلظت خط هست. با ارزشی متغیر بین 0.0 تا 1.0.
  • fillColor – رنگ هگزادسیمالی ناحیه ایی که دورش حصار شده رو مشخص میکنه.
  • fillOpacity – مشخص کننده غلظت رنگ هست. و ارزش اون متغیر بین 0.0 و 1.0 میباشد.
  • editable – قابلیت ویرایش خط بوسیله کاربران رو تعیین میکنه.

 var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = newgoogle.maps.Polygon({
  path:myTrip,
  strokeColor:”#0000FF”,
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:”#0000FF”,
  fillOpacity:0.4
});

دایره در Google Maps:

یک دایره علاوه بر ویژگی هایی که Polygon و Polyline از اونها پیروی میکردند، خواص زیر رو هم براشون میشه بکار برد:

  • Center – مشخص کننده طول و عرض جغرافیایی مرکز دایره.
  • radius – مشخص کننده شعاع دایره به متر.

var myCity = newgoogle.maps.Circle({
  center:amsterdam,
  radius:20000,
  strokeColor:”#0000FF”,
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:”#0000FF”,
  fillOpacity:0.4
});

InfoWindow در Google Maps:

مثال زیر یک InfoWindow به همراه محتوای یک متن رو برای یک مارکر نشون میده

var infowindow = newgoogle.maps.InfoWindow({
  content:”Hello World!”
  });

infowindow.open(map,marker);

شما میتونین متدها و اشیاء بالا رو در ظرفی که برای Google Maps در مقاله های قبلی درست کردیم رو قرار بدین و نتیجه رو ببینین. با تشکر از همراهیتون.

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

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

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