اشکال و خطوط

پلتفرم را انتخاب کنید: Android iOS JavaScript

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

چند خط

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

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

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

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

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

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

TypeScript 

// 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
مشاهده نمونه

Sample را امتحان کنید

یک پلی لاین را بردارید

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

flightPath.setMap(null);

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

یک پلی لاین را بررسی کنید

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

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

TypeScript 

// 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
مشاهده نمونه

Sample را امتحان کنید

یک پلی لاین را سفارشی کنید

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

چند ضلعی ها

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

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

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

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

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

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

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

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

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

TypeScript 

// 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
مشاهده نمونه

Sample را امتحان کنید

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

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

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

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

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

bermudaTriangle.setMap(null);

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

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

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

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

TypeScript 

// 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
مشاهده نمونه

Sample را امتحان کنید

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

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

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

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

TypeScript 

// 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
مشاهده نمونه

Sample را امتحان کنید

مستطیل ها

علاوه بر یک کلاس Polygon عمومی، Google Maps JavaScript API یک کلاس خاص برای اشیاء Rectangle دارد تا ساخت آنها را ساده کند.

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

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

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

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

TypeScript 

// 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
مشاهده نمونه

Sample را امتحان کنید

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

TypeScript 

// 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
مشاهده نمونه

Sample را امتحان کنید

یک مستطیل را بردارید

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

rectangle.setMap(null);

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

حلقه ها

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

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

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

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

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

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

TypeScript 

// This example creates circles on the map, representing populations in North
// America.

// First, create an object containing LatLng and population for each city.

interface City {
  center: google.maps.LatLngLiteral;
  population: number;
}

const citymap: Record<string, City> = {
  chicago: {
    center: { lat: 41.878, lng: -87.629 },
    population: 2714856,
  },
  newyork: {
    center: { lat: 40.714, lng: -74.005 },
    population: 8405837,
  },
  losangeles: {
    center: { lat: 34.052, lng: -118.243 },
    population: 3857799,
  },
  vancouver: {
    center: { lat: 49.25, lng: -123.1 },
    population: 603502,
  },
};

function initMap(): void {
  // Create the map.
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: 37.09, lng: -95.712 },
      mapTypeId: "terrain",
    }
  );

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (const city in citymap) {
    // Add the circle for this city to the map.
    const cityCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100,
    });
  }
}

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

جاوا اسکریپت 

const citymap = {
  chicago: {
    center: { lat: 41.878, lng: -87.629 },
    population: 2714856,
  },
  newyork: {
    center: { lat: 40.714, lng: -74.005 },
    population: 8405837,
  },
  losangeles: {
    center: { lat: 34.052, lng: -118.243 },
    population: 3857799,
  },
  vancouver: {
    center: { lat: 49.25, lng: -123.1 },
    population: 603502,
  },
};

function initMap() {
  // Create the map.
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: 37.09, lng: -95.712 },
    mapTypeId: "terrain",
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (const city in citymap) {
    // Add the circle for this city to the map.
    const cityCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100,
    });
  }
}

window.initMap = initMap;
index.js
مشاهده نمونه

Sample را امتحان کنید

یک دایره را بردارید

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

circle.setMap(null);

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

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

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

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

یک شکل قابل ویرایش بسازید

هر شکلی (چندخط، چند ضلعی، دایره و مستطیل) را می توان به عنوان قابل ویرایش توسط کاربر، با تنظیم 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 زمانی که کاربر کشیدن شکل را متوقف می کند فعال می شود.

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