اشکال و خطوط

پلتفرم مورد نظر را انتخاب کنید: اندروید، iOS، جاوا اسکریپت

شما می‌توانید اشکال مختلفی را به نقشه خود اضافه کنید. یک شکل، شیئی روی نقشه است که به مختصات عرض/طول جغرافیایی گره خورده است. اشکال زیر در دسترس هستند: خط ، چندضلعی ، دایره و مستطیل . همچنین می‌توانید اشکال خود را طوری پیکربندی کنید که کاربران بتوانند آنها را ویرایش یا جابجا کنند .

چندخطی‌ها

برای رسم یک خط روی نقشه، از یک چندخطی (polyline) استفاده کنید. کلاس Polyline یک پوشش خطی از پاره خط‌های متصل به هم را روی نقشه تعریف می‌کند. یک شیء Polyline شامل آرایه‌ای از مکان‌های LatLng است و مجموعه‌ای از پاره خط‌ها را ایجاد می‌کند که آن مکان‌ها را به ترتیبی مرتب به هم متصل می‌کنند.

اضافه کردن چندخطی

سازنده‌ی Polyline مجموعه‌ای از PolylineOptions را می‌گیرد که مختصات LatLng خط و مجموعه‌ای از سبک‌ها را برای تنظیم رفتار بصری چندخطی مشخص می‌کند.

اشیاء Polyline به صورت مجموعه‌ای از بخش‌های مستقیم روی نقشه ترسیم می‌شوند. می‌توانید هنگام ساخت خط، رنگ‌ها، وزن‌ها و شفافیت‌های سفارشی را برای خط دور خط در PolylineOptions مشخص کنید، یا می‌توانید این ویژگی‌ها را پس از ساخت تغییر دهید. یک چندخطی از سبک‌های خط دور زیر پشتیبانی می‌کند:

  • strokeColor یک رنگ HTML هگزادسیمال با فرمت "#FFFFFF" را مشخص می‌کند. کلاس Polyline از رنگ‌های نامگذاری شده پشتیبانی نمی‌کند.
  • strokeOpacity یک مقدار عددی بین 0.0 و 1.0 را برای تعیین میزان کدری رنگ خط مشخص می‌کند. مقدار پیش‌فرض 1.0 است.
  • strokeWeight عرض خط را بر حسب پیکسل مشخص می‌کند.

ویژگی editable چندخطی مشخص می‌کند که آیا کاربران می‌توانند شکل را ویرایش کنند یا خیر. شکل‌های قابل ویرایش توسط کاربر را در زیر ببینید. به طور مشابه، می‌توانید ویژگی draggable را تنظیم کنید تا به کاربران اجازه دهید خط را بکشند (drag کنند) .

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

تایپ اسکریپت 

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 3,
      center: { lat: 0, lng: -180 },
      mapTypeId: "terrain",
    }
  );

  const flightPlanCoordinates = [
    { lat: 37.772, lng: -122.214 },
    { lat: 21.291, lng: -157.821 },
    { lat: -18.142, lng: 178.431 },
    { lat: -27.467, lng: 153.027 },
  ];
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  flightPath.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

جاوا اسکریپت 

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    center: { lat: 0, lng: -180 },
    mapTypeId: "terrain",
  });
  const flightPlanCoordinates = [
    { lat: 37.772, lng: -122.214 },
    { lat: 21.291, lng: -157.821 },
    { lat: -18.142, lng: 178.431 },
    { lat: -27.467, lng: 153.027 },
  ];
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  flightPath.setMap(map);
}

window.initMap = initMap;
index.js
مشاهده مثال

نمونه را امتحان کنید

حذف یک چندخطی

برای حذف یک چندخطی از نقشه، متد setMap() را فراخوانی کنید و null به عنوان آرگومان به آن ارسال کنید. در مثال زیر، flightPath یک شیء چندخطی است:

flightPath.setMap(null);

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

بررسی یک چندخطی

یک چندخطی مجموعه‌ای از مختصات را به عنوان آرایه‌ای از اشیاء LatLng مشخص می‌کند. این مختصات مسیر خط را تعیین می‌کنند. برای بازیابی مختصات، getPath() را فراخوانی کنید، که آرایه‌ای از نوع MVCArray را برمی‌گرداند. می‌توانید آرایه را با استفاده از عملیات زیر دستکاری و بررسی کنید:

  • getAt() مقدار LatLng در یک مقدار اندیس مبتنی بر صفر برمی‌گرداند.
  • insertAt() یک LatLng ارسالی را در یک مقدار اندیس مبتنی بر صفر وارد می‌کند. توجه داشته باشید که هر مختصات موجود در آن مقدار اندیس به جلو منتقل می‌شود.
  • removeAt() یک LatLng در یک مقدار اندیس مبتنی بر صفر مشخص حذف می‌کند.

مثال زیر ساخت یک چندخطی را بر اساس کلیک‌ها نشان می‌دهد (برای افزودن یک رأس روی نقشه کلیک کنید).

تایپ اسکریپت 

// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.

let poly: google.maps.Polyline;
let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 7,
    center: { lat: 41.879, lng: -87.624 }, // Center the map on Chicago, USA.
  });

  poly = new google.maps.Polyline({
    strokeColor: "#000000",
    strokeOpacity: 1.0,
    strokeWeight: 3,
  });
  poly.setMap(map);

  // Add a listener for the click event
  map.addListener("click", addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event: google.maps.MapMouseEvent) {
  const path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng as google.maps.LatLng);

  // Add a new marker at the new plotted point on the polyline.
  new google.maps.Marker({
    position: event.latLng,
    title: "#" + path.getLength(),
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

جاوا اسکریپت 

// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.
let poly;
let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 7,
    center: { lat: 41.879, lng: -87.624 }, // Center the map on Chicago, USA.
  });
  poly = new google.maps.Polyline({
    strokeColor: "#000000",
    strokeOpacity: 1.0,
    strokeWeight: 3,
  });
  poly.setMap(map);
  // Add a listener for the click event
  map.addListener("click", addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  const path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);
  // Add a new marker at the new plotted point on the polyline.
  new google.maps.Marker({
    position: event.latLng,
    title: "#" + path.getLength(),
    map: map,
  });
}

window.initMap = initMap;
index.js
مشاهده مثال

نمونه را امتحان کنید

سفارشی سازی یک چندخطی

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

چندضلعی‌ها

یک چندضلعی نشان دهنده ناحیه‌ای است که توسط یک مسیر بسته (یا حلقه) محصور شده است، که توسط یک سری مختصات تعریف می‌شود. اشیاء Polygon مشابه اشیاء Polyline هستند، زیرا از یک سری مختصات در یک توالی منظم تشکیل شده‌اند. چندضلعی‌ها با یک خط دور و یک خط پر کننده رسم می‌شوند. می‌توانید رنگ‌ها، وزن‌ها و شفافیت‌های سفارشی را برای لبه چندضلعی (خط دور) و رنگ‌ها و شفافیت‌های سفارشی را برای ناحیه محصور شده (پر کننده) تعریف کنید. رنگ‌ها باید در قالب HTML هگزادسیمال مشخص شوند. نام رنگ‌ها پشتیبانی نمی‌شود.

اشیاء Polygon می‌توانند اشکال پیچیده‌ای از جمله موارد زیر را توصیف کنند:

  • چندین ناحیه غیرمجاور که توسط یک چندضلعی واحد تعریف شده‌اند.
  • مناطقی که سوراخ‌هایی در آنها وجود دارد.
  • تقاطع‌های یک یا چند منطقه.

برای تعریف یک شکل پیچیده، از یک چندضلعی با چندین مسیر استفاده می‌کنید.

نکته: لایه Data روش ساده‌ای برای ترسیم چندضلعی‌ها ارائه می‌دهد. این لایه، پیچش چندضلعی‌ها را برای شما مدیریت می‌کند و ترسیم چندضلعی‌های دارای حفره را آسان‌تر می‌سازد. به مستندات لایه Data مراجعه کنید.

اضافه کردن چندضلعی

از آنجا که یک ناحیه چندضلعی ممکن است شامل چندین مسیر جداگانه باشد، ویژگی paths شیء Polygon آرایه‌ای از آرایه‌ها را مشخص می‌کند که هر کدام از نوع MVCArray هستند. هر آرایه یک دنباله جداگانه از مختصات LatLng مرتب شده را تعریف می‌کند.

برای چندضلعی‌های ساده‌ای که فقط از یک مسیر تشکیل شده‌اند، می‌توانید با استفاده از یک آرایه از مختصات LatLng یک Polygon بسازید. API جاوا اسکریپت Maps، آرایه ساده را پس از ساخت، هنگام ذخیره آن در ویژگی paths ، به آرایه‌ای از آرایه‌ها تبدیل می‌کند. این API یک متد ساده getPath() برای چندضلعی‌های تشکیل شده از یک مسیر ارائه می‌دهد.

ویژگی editable چندضلعی مشخص می‌کند که آیا کاربران می‌توانند شکل را ویرایش کنند یا خیر. شکل‌های قابل ویرایش توسط کاربر را در زیر ببینید. به طور مشابه، می‌توانید ویژگی draggable را تنظیم کنید تا به کاربران اجازه دهید شکل را بکشند (drag کنند) .

تایپ اسکریپت 

// This example creates a simple polygon representing the Bermuda Triangle.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 5,
      center: { lat: 24.886, lng: -70.268 },
      mapTypeId: "terrain",
    }
  );

  // Define the LatLng coordinates for the polygon's path.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
    { lat: 25.774, lng: -80.19 },
  ];

  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

جاوا اسکریپت 

// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: "terrain",
  });
  // Define the LatLng coordinates for the polygon's path.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
    { lat: 25.774, lng: -80.19 },
  ];
  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

window.initMap = initMap;
index.js
مشاهده مثال

نمونه را امتحان کنید

تکمیل خودکار چندضلعی

Polygon در مثال بالا شامل چهار مجموعه مختصات LatLng است، اما توجه داشته باشید که مجموعه‌های اول و آخر، مکان یکسانی را تعریف می‌کنند که حلقه را کامل می‌کند. با این حال، در عمل، از آنجایی که چندضلعی‌ها نواحی بسته را تعریف می‌کنند، نیازی به مشخص کردن آخرین مجموعه مختصات ندارید. API جاوا اسکریپت Maps به طور خودکار چندضلعی را با رسم یک خط که آخرین مکان را به اولین مکان برای هر مسیر مشخص متصل می‌کند، تکمیل می‌کند.

مثال زیر مشابه مثال قبلی است، با این تفاوت که LatLng آخر حذف شده است: مثال را ببینید .

حذف یک چندضلعی

برای حذف یک چندضلعی از نقشه، متد setMap() را فراخوانی کنید و null به عنوان آرگومان به آن ارسال کنید. در مثال زیر، bermudaTriangle یک شیء چندضلعی است:

bermudaTriangle.setMap(null);

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

بررسی یک چندضلعی

یک چندضلعی، سری مختصات خود را به صورت آرایه‌ای از آرایه‌ها مشخص می‌کند، که در آن هر آرایه از نوع MVCArray است. هر آرایه "leaf" آرایه‌ای از مختصات LatLng است که یک مسیر واحد را مشخص می‌کند. برای بازیابی این مختصات، متد getPaths() شیء Polygon را فراخوانی کنید. از آنجایی که آرایه یک MVCArray است، باید آن را با استفاده از عملیات زیر دستکاری و بررسی کنید:

  • getAt() مقدار LatLng در یک مقدار اندیس مبتنی بر صفر برمی‌گرداند.
  • insertAt() یک LatLng ارسالی را در یک مقدار اندیس مبتنی بر صفر وارد می‌کند. توجه داشته باشید که هر مختصات موجود در آن مقدار اندیس به جلو منتقل می‌شود.
  • removeAt() یک LatLng در یک مقدار اندیس مبتنی بر صفر مشخص حذف می‌کند.

تایپ اسکریپت 

// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

let map: google.maps.Map;

let infoWindow: google.maps.InfoWindow;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: "terrain",
  });

  // Define the LatLng coordinates for the polygon.
  const triangleCoords: google.maps.LatLngLiteral[] = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];

  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);

  // Add a listener for the click event.
  bermudaTriangle.addListener("click", showArrays);

  infoWindow = new google.maps.InfoWindow();
}

function showArrays(event: any) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  // @ts-ignore
  const polygon = this as google.maps.Polygon;
  const vertices = polygon.getPath();

  let contentString =
    "<b>Bermuda Triangle polygon</b><br>" +
    "Clicked location: <br>" +
    event.latLng.lat() +
    "," +
    event.latLng.lng() +
    "<br>";

  // Iterate over the vertices.
  for (let i = 0; i < vertices.getLength(); i++) {
    const xy = vertices.getAt(i);

    contentString +=
      "<br>" + "Coordinate " + i + ":<br>" + xy.lat() + "," + xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

جاوا اسکریپت 

// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.
let map;
let infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: "terrain",
  });

  // Define the LatLng coordinates for the polygon.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];
  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
  // Add a listener for the click event.
  bermudaTriangle.addListener("click", showArrays);
  infoWindow = new google.maps.InfoWindow();
}

function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  // @ts-ignore
  const polygon = this;
  const vertices = polygon.getPath();
  let contentString =
    "<b>Bermuda Triangle polygon</b><br>" +
    "Clicked location: <br>" +
    event.latLng.lat() +
    "," +
    event.latLng.lng() +
    "<br>";

  // Iterate over the vertices.
  for (let i = 0; i < vertices.getLength(); i++) {
    const xy = vertices.getAt(i);

    contentString +=
      "<br>" + "Coordinate " + i + ":<br>" + xy.lat() + "," + xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);
  infoWindow.open(map);
}

window.initMap = initMap;
index.js
مشاهده مثال

نمونه را امتحان کنید

ایجاد سوراخ در یک چندضلعی

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

نکته: لایه Data ترتیب مسیرهای داخلی و خارجی را برای شما مدیریت می‌کند و ترسیم چندضلعی‌های دارای سوراخ را آسان‌تر می‌کند. برای لایه Data به مستندات مراجعه کنید.

مثال زیر یک چندضلعی با دو مسیر رسم می‌کند که مسیر داخلی در جهت مخالف مسیر خارجی پیچیده شده است.

تایپ اسکریپت 

// This example creates a triangular polygon with a hole in it.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 5,
      center: { lat: 24.886, lng: -70.268 },
    }
  );

  // Define the LatLng coordinates for the polygon's  outer path.
  const outerCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];

  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  const innerCoords = [
    { lat: 28.745, lng: -70.579 },
    { lat: 29.57, lng: -67.514 },
    { lat: 27.339, lng: -66.668 },
  ];

  // Construct the polygon, including both paths.
  const bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: "#FFC107",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FFC107",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

جاوا اسکریپت 

// This example creates a triangular polygon with a hole in it.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
  });
  // Define the LatLng coordinates for the polygon's  outer path.
  const outerCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];
  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  const innerCoords = [
    { lat: 28.745, lng: -70.579 },
    { lat: 29.57, lng: -67.514 },
    { lat: 27.339, lng: -66.668 },
  ];
  // Construct the polygon, including both paths.
  const bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: "#FFC107",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FFC107",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

window.initMap = initMap;
index.js
مشاهده مثال

نمونه را امتحان کنید

مستطیل‌ها

علاوه بر یک کلاس عمومی Polygon ، API جاوا اسکریپت نقشه‌های گوگل شامل یک کلاس خاص برای اشیاء Rectangle است تا ساخت آنها را ساده کند.

یک مستطیل اضافه کنید

یک Rectangle شبیه به یک Polygon است، به این صورت که می‌توانید رنگ‌ها، وزن‌ها و شفافیت‌های سفارشی را برای لبه مستطیل (خطوط دور) و رنگ‌ها و شفافیت‌های سفارشی را برای ناحیه داخل مستطیل (پر کردن) تعریف کنید. رنگ‌ها باید به سبک HTML عددی هگزادسیمال مشخص شوند.

برخلاف Polygon ، برای Rectangle paths تعریف نمی‌کنید. در عوض، یک مستطیل دارای ویژگی bounds است که شکل آن را با تعیین google.maps.LatLngBounds برای مستطیل تعریف می‌کند.

ویژگی editable مستطیل مشخص می‌کند که آیا کاربران می‌توانند شکل را ویرایش کنند یا خیر. شکل‌های قابل ویرایش توسط کاربر را در زیر ببینید. به طور مشابه، می‌توانید ویژگی draggable را تنظیم کنید تا به کاربران اجازه دهید مستطیل را بکشند (drag کنند) .

تایپ اسکریپت 

// This example adds a red rectangle to a map.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 11,
      center: { lat: 33.678, lng: -116.243 },
      mapTypeId: "terrain",
    }
  );

  const rectangle = new google.maps.Rectangle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251,
    },
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

جاوا اسکریپت 

// This example adds a red rectangle to a map.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 33.678, lng: -116.243 },
    mapTypeId: "terrain",
  });
  const rectangle = new google.maps.Rectangle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251,
    },
  });
}

window.initMap = initMap;
index.js
مشاهده مثال

نمونه را امتحان کنید

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

تایپ اسکریپت 

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 11,
      center: { lat: 40.74852, lng: -73.981687 },
      mapTypeId: "terrain",
    }
  );

  const rectangle = new google.maps.Rectangle();

  map.addListener("zoom_changed", () => {
    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      bounds: map.getBounds() as google.maps.LatLngBounds,
    });
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

جاوا اسکریپت 

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 40.74852, lng: -73.981687 },
    mapTypeId: "terrain",
  });
  const rectangle = new google.maps.Rectangle();

  map.addListener("zoom_changed", () => {
    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      bounds: map.getBounds(),
    });
  });
}

window.initMap = initMap;
index.js
مشاهده مثال

نمونه را امتحان کنید

حذف یک مستطیل

برای حذف یک مستطیل از نقشه، متد setMap() را فراخوانی کنید و null به عنوان آرگومان به آن ارسال کنید. 

rectangle.setMap(null);

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

دایره‌ها

علاوه بر کلاس عمومی Polygon ، API جاوا اسکریپت نقشه‌های گوگل شامل یک کلاس خاص برای اشیاء Circle است تا ساخت آنها را ساده کند.

یک دایره اضافه کنید

یک Circle شبیه به یک Polygon است، به این صورت که می‌توانید رنگ‌ها، وزن‌ها و شفافیت‌های سفارشی را برای لبه دایره (خطوط دور) و رنگ‌ها و شفافیت‌های سفارشی را برای ناحیه داخل دایره (پر کردن) تعریف کنید. رنگ‌ها باید به سبک HTML عددی هگزادسیمال مشخص شوند.

برخلاف Polygon ، برای Circle paths تعریف نمی‌کنید. در عوض، دایره دو ویژگی اضافی دارد که شکل آن را تعریف می‌کنند:

  • center مقدار google.maps.LatLng مرکز دایره را مشخص می‌کند.
  • radius شعاع دایره را بر حسب متر مشخص می‌کند.

ویژگی editable دایره مشخص می‌کند که آیا کاربران می‌توانند شکل را ویرایش کنند یا خیر. شکل‌های قابل ویرایش توسط کاربر را در زیر ببینید. به طور مشابه، می‌توانید ویژگی draggable را تنظیم کنید تا به کاربران اجازه دهید دایره را بکشند .

مثال زیر از دایره‌ها برای نمایش زمان تقریبی پیاده‌روی بین مکان‌ها در کیوتو، ژاپن استفاده می‌کند. فاصله مورد نیاز را از منو انتخاب کنید، روی نقشه کلیک کنید تا دایره دوباره در مرکز قرار گیرد و دایره را بکشید تا موقعیت آن تغییر کند.

تایپ اسکریپت 

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
let innerMap;

async function initMap() {
    // Import the needed libraries.
    // Request needed libraries.
    (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;
    (await google.maps.importLibrary('marker')) as google.maps.MarkerLibrary;
    // Get the gmp-map element.
    const mapElement = document.querySelector(
        'gmp-map'
    ) as google.maps.MapElement;

    const initialCenter = { lat: 34.98956821576194, lng: 135.74239981260283 }; // Hotel Emion, Kyoto, Japan

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    const buttons = document.querySelectorAll('input[name="radius"]');

    const walkingCircle = new google.maps.Circle({
        strokeColor: '#ffdd00ff',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#ffdd00ff',
        fillOpacity: 0.35,
        map: innerMap,
        center: initialCenter,
        radius: 400,
        draggable: true,
        editable: false,
    });

    // Define a "Crosshair" vector icon
    const parser = new DOMParser();
    const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-6 -6 12 12"><path d="M -6,0 L 6,0 M 0,-6 L 0,6" stroke="black" stroke-width="1"/></svg>`;

    const pinSvg = parser.parseFromString(
        svgString,
        'image/svg+xml'
    ).documentElement;

    const centerMarker = new google.maps.marker.AdvancedMarkerElement({
        position: initialCenter,
        title: 'A marker using a custom SVG image.',
        //@ts-ignore
        anchorLeft: '-50%',
        anchorTop: '-50%',
    });
    centerMarker.append(pinSvg);
    mapElement.append(centerMarker);

    // Wait for the map to finish drawing its tiles.
    google.maps.event.addListenerOnce(innerMap, 'tilesloaded', function () {
        // Get the controls div
        const controls = document.getElementById('control-panel');

        // Display controls once map is loaded.
        if (controls) {
            controls.style.display = 'block';
        }
    });

    // Add event listener to update the radius based on user selection.
    buttons.forEach((button) => {
        button.addEventListener('change', (event) => {
            const target = event.target as HTMLInputElement;
            walkingCircle.setRadius(Number(target.value));
        });
    });

    // Handle user click, reset the map center and position the circle.
    innerMap.addListener('click', (mapsMouseEvent) => {
        const newCenter = mapsMouseEvent.latLng;
        walkingCircle.setCenter(newCenter);
        centerMarker.position = newCenter;
        innerMap.panTo(newCenter);
    });

    // Handle user dragging the circle, update the center marker position.
    walkingCircle.addListener('center_changed', () => {
        centerMarker.position = walkingCircle.getCenter();
    });
}

initMap();
index.ts

جاوا اسکریپت 

const mapElement = document.querySelector('gmp-map');
let innerMap;
async function initMap() {
    // Import the needed libraries.
    // Request needed libraries.
    (await google.maps.importLibrary('maps'));
    (await google.maps.importLibrary('marker'));
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');
    const initialCenter = { lat: 34.98956821576194, lng: 135.74239981260283 }; // Hotel Emion, Kyoto, Japan
    // Get the inner map.
    const innerMap = mapElement.innerMap;
    const buttons = document.querySelectorAll('input[name="radius"]');
    const walkingCircle = new google.maps.Circle({
        strokeColor: '#ffdd00ff',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#ffdd00ff',
        fillOpacity: 0.35,
        map: innerMap,
        center: initialCenter,
        radius: 400,
        draggable: true,
        editable: false,
    });
    // Define a "Crosshair" vector icon
    const parser = new DOMParser();
    const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-6 -6 12 12"><path d="M -6,0 L 6,0 M 0,-6 L 0,6" stroke="black" stroke-width="1"/></svg>`;
    const pinSvg = parser.parseFromString(svgString, 'image/svg+xml').documentElement;
    const centerMarker = new google.maps.marker.AdvancedMarkerElement({
        position: initialCenter,
        title: 'A marker using a custom SVG image.',
        //@ts-ignore
        anchorLeft: '-50%',
        anchorTop: '-50%',
    });
    centerMarker.append(pinSvg);
    mapElement.append(centerMarker);
    // Wait for the map to finish drawing its tiles.
    google.maps.event.addListenerOnce(innerMap, 'tilesloaded', function () {
        // Get the controls div
        const controls = document.getElementById('control-panel');
        // Display controls once map is loaded.
        if (controls) {
            controls.style.display = 'block';
        }
    });
    // Add event listener to update the radius based on user selection.
    buttons.forEach((button) => {
        button.addEventListener('change', (event) => {
            const target = event.target;
            walkingCircle.setRadius(Number(target.value));
        });
    });
    // Handle user click, reset the map center and position the circle.
    innerMap.addListener('click', (mapsMouseEvent) => {
        const newCenter = mapsMouseEvent.latLng;
        walkingCircle.setCenter(newCenter);
        centerMarker.position = newCenter;
        innerMap.panTo(newCenter);
    });
    // Handle user dragging the circle, update the center marker position.
    walkingCircle.addListener('center_changed', () => {
        centerMarker.position = walkingCircle.getCenter();
    });
}
initMap();
index.js

سی‌اس‌اس 

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#control-panel {
  display: none; /* Set to 'display: block' after the map loads. */
  background-color: #fff;
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  font-family: "Roboto", "sans-serif";
  font-size: medium;
  margin: 10px;
  padding: 10px;
}
style.css

اچ‌تی‌ام‌ال 

<html>
    <head>
        <title>Circles</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <!-- prettier-ignore -->
        <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
    </head>
    <body>
        <gmp-map
            center="34.98956821576194, 135.74239981260283"
            zoom="15"
            map-id="DEMO_MAP_ID">
            <div id="control-panel" slot="control-inline-start-block-start">
                <input
                    id="short-walk"
                    type="radio"
                    name="radius"
                    value="400"
                    checked />
                <label for="short-walk">Short Walk (~5 minutes)</label><br />
                <input
                    id="medium-walk"
                    type="radio"
                    name="radius"
                    value="800" />
                <label for="medium-walk">Medium Walk (~15 minutes)</label><br />
                <input id="long-walk" type="radio" name="radius" value="1600" />
                <label for="long-walk">Long Walk (~30 minutes) </label>
            </div>
        </gmp-map>
    </body>
</html>
index.html
مشاهده مثال

نمونه را امتحان کنید

حذف یک دایره

برای حذف یک دایره از نقشه، متد setMap() را فراخوانی کنید و null به عنوان آرگومان به آن ارسال کنید. 

circle.setMap(null);

توجه داشته باشید که روش فوق دایره را حذف نمی‌کند. بلکه دایره را از نقشه حذف می‌کند. اگر به جای آن می‌خواهید دایره را حذف کنید، باید آن را از نقشه حذف کنید و سپس خود دایره را روی null تنظیم کنید.

اشکال قابل ویرایش و کشیدن توسط کاربر

قابل ویرایش کردن یک شکل، دستگیره‌هایی به آن اضافه می‌کند که افراد می‌توانند از آنها برای تغییر موقعیت، تغییر شکل و تغییر اندازه شکل مستقیماً روی نقشه استفاده کنند. همچنین می‌توانید یک شکل را قابل کشیدن کنید تا افراد بتوانند آن را به مکان دیگری روی نقشه منتقل کنند.

تغییرات ایجاد شده توسط کاربر در شیء بین جلسات (session) باقی نمی‌مانند. اگر می‌خواهید ویرایش‌های کاربر را ذخیره کنید، باید خودتان اطلاعات را ثبت و ذخیره کنید.

یک شکل را قابل ویرایش کنید

هر شکلی (چندخطی، چندضلعی، دایره و مستطیل) را می‌توان با تنظیم editable روی true در گزینه‌های شکل، به عنوان قابل ویرایش توسط کاربر تنظیم کرد. 

var bounds = {
  north: 44.599,
  south: 44.490,
  east: -78.443,
  west: -78.649
};

// Define a rectangle and set its editable property to true.
var rectangle = new google.maps.Rectangle({
  bounds: bounds,
  editable: true
});

مشاهده مثال

یک شکل را قابل کشیدن کنید

به طور پیش‌فرض، شکلی که روی نقشه رسم می‌شود در موقعیت ثابت قرار می‌گیرد. برای اینکه کاربران بتوانند یک شکل را به مکان دیگری روی نقشه بکشند، در گزینه‌های شکل، draggable روی true تنظیم کنید. 

var redCoords = [
  {lat: 25.774, lng: -80.190},
  {lat: 18.466, lng: -66.118},
  {lat: 32.321, lng: -64.757}
];

// Construct a draggable red triangle with geodesic set to true.
new google.maps.Polygon({
  map: map,
  paths: redCoords,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  draggable: true,
  geodesic: true
});

هنگام فعال کردن کشیدن روی یک چندضلعی یا چندخطی، باید با تنظیم ویژگی geodesic آن روی true ، ژئودزیک کردن چندضلعی یا چندخطی را نیز در نظر بگیرید.

یک چندضلعی ژئودزیک هنگام جابجایی، شکل جغرافیایی واقعی خود را حفظ می‌کند و باعث می‌شود که چندضلعی با جابجایی به سمت شمال یا جنوب در تصویر مرکاتور، کج و معوج به نظر برسد. چندضلعی‌های غیر ژئودزیک همیشه ظاهر اولیه خود را روی صفحه حفظ می‌کنند.

در یک چندخطی ژئودزیک، بخش‌های چندخطی به عنوان کوتاه‌ترین مسیر بین دو نقطه روی سطح زمین رسم می‌شوند، با فرض اینکه زمین کروی است، برخلاف خطوط مستقیم در تصویر مرکاتور.

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

نقشه زیر دو مثلث با اندازه و ابعاد تقریباً یکسان را نشان می‌دهد. ویژگی geodesic مثلث قرمز روی true تنظیم شده است. توجه کنید که چگونه شکل آن با حرکت به سمت شمال تغییر می‌کند.

مشاهده مثال

به رویدادهای ویرایش گوش دهید

وقتی یک شکل ویرایش می‌شود، پس از اتمام ویرایش، رویدادی اجرا می‌شود. این رویدادها در زیر فهرست شده‌اند.

شکل رویدادها
دایره radius_changed
center_changed
چندضلعی insert_at
remove_at
set_at

شنونده باید روی مسیر چندضلعی تنظیم شود. اگر چندضلعی چندین مسیر داشته باشد، باید روی هر مسیر یک شنونده تنظیم شود.

پلی‌لاین insert_at
remove_at
set_at

شنونده باید روی مسیر چندخطی تنظیم شود.

مستطیل bounds_changed

چند قطعه کد مفید: 

google.maps.event.addListener(circle, 'radius_changed', function() {
  console.log(circle.getRadius());
});

google.maps.event.addListener(outerPath, 'set_at', function() {
  console.log('Vertex moved on outer path.');
});

google.maps.event.addListener(innerPath, 'insert_at', function() {
  console.log('Vertex removed from inner path.');
});

google.maps.event.addListener(rectangle, 'bounds_changed', function() {
  console.log('Bounds changed.');
});

مثالی از مدیریت رویداد ویرایش روی یک مستطیل را ببینید: مثال را ببینید .

به رویدادهای درگ کردن گوش دهید

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

رویداد توضیحات
dragstart زمانی اجرا می‌شود که کاربر شروع به کشیدن شکل کند.
drag در حالی که کاربر شکل را می‌کشد، مکرراً اجرا می‌شود.
dragend زمانی اجرا می‌شود که کاربر کشیدن شکل را متوقف کند.

برای اطلاعات بیشتر در مورد مدیریت رویدادها، به مستندات مربوط به رویدادها مراجعه کنید.