لایه‌های نقشه‌های گوگل

گوگل‌مدیا - لایه‌ها

لایه‌ها اشیایی هستند که به مختصات عرض و طول جغرافیایی در نقشه متصل می‌شوند.

گوگل‌مدیا دارای انواع مختلف لایه‌ها است:

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

گوگل‌مدیا - افزودن نشانگر

تولیدکننده نشانگر می‌تواند نشانگر ایجاد کند. توجه داشته باشید که باید ویژگی position تنظیم شود تا نشانگر نمایش داده شود.

برای افزودن نشانگر به نقشه از روش setMap() استفاده کنید:

مثال

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

گوگل‌مدیا - حرکت نشانگر

در اینجا مثالی از نحوه استفاده از ویژگی animation برای تنظیم حرکت نشانگر آورده شده است:

مثال

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

گوگل‌مدیا - استفاده از آیکون برای جایگزینی نشانگر

در اینجا مثالی از تعریف تصویر (آیکون) مورد استفاده برای جایگزینی نشانگر پیش‌فرض آورده شده است:

مثال

var marker = new google.maps.Marker({
  position:myCenter,
  icon:'pinkball.png'
});
marker.setMap(map);

گوگل‌مدیا - خط مستقیم

خط مستقیم از طریق قرار دادن یک سری از مختصات به ترتیب ترسیم می‌شود.

خط مستقیم پشتیبانی از ویژگی‌های زیر را دارد:

• path - تعریف چندین عرض و طول جغرافیایی خط
• strokeColor - تعیین رنگ شش‌نمایی خط (فرمت: "#FFFFFF")
• strokeOpacity - تعیین شفافیت خط (مقدار بین 0.0 تا 1.0)
• strokeWeight - تعیین ضخامت خط (به پیکسل)
• editable - تعیین اینکه آیا خط قابل ویرایش توسط کاربر است یا خیر (true/false)

مثال

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

گوگل‌مدیا - متنوعگون

متنوعگون مانند خطوط پیچیده است، که از مجموعه‌ای از مختصات مرتب‌شده تشکیل شده است. با این حال، متنوعگون برای تعیین منطقه بسته طراحی شده است.

متنوعگون شامل خطوط است و شکل «بسته» دارد (تمام خطوط به هم متصل هستند).

متنوعگون پشتیبانی از ویژگی‌های زیر را دارد:

• path - تعیین چندین مختصات عرض و طول برای خط (مختصات اولین و آخرین مساوی هستند)
• strokeColor - تعیین رنگ شش‌نمایی خط (فرمت: "#FFFFFF")
• strokeOpacity - تعیین شفافیت خط (مقدار بین 0.0 تا 1.0)
• strokeWeight - تعیین ضخامت خط (به پیکسل)
• fillColor - تعیین رنگ شش‌نمایی برای منطقه بسته (فرمت: "#FFFFFF")
• fillOpacity - تعیین شفافیت رنگ پرکن (مقدار بین 0.0 تا 1.0)
• editable - تعیین اینکه آیا خط قابل ویرایش توسط کاربر است یا خیر (true/false)

مثال

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

گوگل‌مدیا - دایره

دایره پشتیبانی از ویژگی‌های زیر را دارد:

• center - تعیین مختصات google.maps.LatLng برای مرکز دایره
• radius - تعیین قطر دایره به واحد متر
• strokeColor - تعیین رنگ شش‌نمایی خط دور دایره (فرمت: "#FFFFFF")
• strokeOpacity - تعیین شفافیت خط (مقدار بین 0.0 تا 1.0)
• strokeWeight - تعیین ضخامت خط (به پیکسل)
• fillColor - تعیین رنگ شش‌نمایی داخلی دایره (فرمت: "#FFFFFF")
• fillOpacity - تعیین شفافیت رنگ پرکن (مقدار بین 0.0 تا 1.0)
• editable - تعیین اینکه کاربر می‌تواند دایره را ویرایش کند یا خیر (true/false)

مثال

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

گوگل‌مدیا - پنجره اطلاعاتی

برای نمایش پنجره اطلاعاتی با محتوای متنی برای marker استفاده می‌شود:

مثال

var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
});
infowindow.open(map,marker);