الأشكال والخطوط

اختيار النظام الأساسي: Android iOS JavaScript

يمكنك إضافة أشكال مختلفة إلى خريطتك. الشكل هو كائن على الخريطة، مرتبط بإحداثي خط العرض/الطول. تتوفّر الأشكال التالية: الخطوط والمضلّعات والدوائر والمستطيلات. يمكنك أيضًا ضبط الأشكال لكي يتمكّن المستخدمون من تعديلها أو سحبها.

الخطوط المتعددة

لرسم خط على الخريطة، استخدم أحد الخطوط المتعددة. تحدد الفئة Polyline تراكبًا خطيًا لأجزاء الخطوط المتصلة على الخريطة. يتكوّن عنصر Polyline من مصفوفة من مواقع جغرافية عددها LatLng، وينشئ سلسلة من القطع المستقيمة التي تربط هذه المواقع الجغرافية بتسلسل مرتَّب.

إضافة خط متعدد

تستخدم الدالة الإنشائية Polyline مجموعة من PolylineOptions تحدّد إحداثيات LatLng للخط ومجموعة من الأنماط لضبط السلوك المرئي للخطوط المتعددة.

يتم رسم عناصر Polyline كسلسلة من القطاعات المستقيمة على الخريطة. يمكنك تحديد قيم ودرجات تعتيم وألوان مخصّصة لحد الخط داخل PolylineOptions عند إنشاء الخط، أو يمكنك تغيير هذه السمات بعد الإنشاء. يدعم الخطوط المتعددة أنماط الضربات التالية:

• تحدّد السمة 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

ملاحظة: اقرأ الدليل حول استخدام TypeScript و"خرائط Google".

JavaScript

// 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

ملاحظة: يتم جمع JavaScript من مقتطف TypeScript.

الاطّلاع على مثال

تجربة "عيّنة"

JSFiddle.net Google Cloud Shell

إزالة خط متعدد

لإزالة خط متعدد من الخريطة، يمكنك طلب طريقة setMap() لتمرير null كوسيطة. في المثال التالي، يمثّل flightPath كائنًا متعدّد الخطوط:

flightPath.setMap(null);

لاحظ أن الطريقة المذكورة أعلاه لا تؤدي إلى حذف الخطوط المتعددة. ويعمل ذلك على إزالة الخطوط المتعددة من الخريطة. وإذا أردت حذف الخط المتعدد، يجب إزالته من الخريطة، ثم ضبط الخط المتعدد نفسه على null.

فحص أحد الخطوط المتعددة

يحدد الخط المتعدد سلسلة من الإحداثيات كمصفوفة من عناصر LatLng. تحدد هذه الإحداثيات مسار الخط. لاسترداد الإحداثيات، يجب استدعاء الدالة getPath()، والتي ستعرض صفيفًا من النوع MVCArray. يمكنك معالجة الصفيف وفحصه باستخدام العمليات التالية:

• تعرض getAt() القيمة LatLng في قيمة فهرس معيّنة تستند إلى صفر.
• تُدرِج السمة insertAt() قيمة LatLng تم تمريرها في قيمة فهرس معيّنة ذات قيمة صفرية. يُرجى العِلم أنّه يتم نقل أي إحداثيات حالية عند قيمة الفهرس إلى الأمام.
• تُزيل removeAt() السمة LatLng في قيمة فهرس معيّنة تستند إلى صفر.

ملاحظة: لا يمكنك استرداد العنصر i في مصفوفة باستخدام البنية mvcArray[i]. عليك استخدام mvcArray.getAt(i).

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

ملاحظة: اقرأ الدليل حول استخدام TypeScript و"خرائط Google".

JavaScript

// 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

ملاحظة: يتم جمع JavaScript من مقتطف TypeScript.

الاطّلاع على مثال

تجربة "عيّنة"

JSFiddle.net Google Cloud Shell

تخصيص خط متعدد

يمكنك إضافة صور قائمة على متجهات إلى خط متعدد في شكل رموز. مع مزيج من الرموز وفئة PolylineOptions، يمكنك التحكم بشكل كبير في شكل ومظهر الخطوط المتعددة على خريطتك. راجِع الرموز للحصول على معلومات عن arrows والخطوط المتقطعة والرموز المخصّصة والرموز المتحركة.

المضلعات

ويمثّل المضلّع منطقة محاطة بمسار مغلق (أو حلقة) يتم تحديده من خلال سلسلة من الإحداثيات. تشبه كائنات Polygon كائنات Polyline من حيث أنّها تتكون من سلسلة من الإحداثيات بتسلسل مرتّب. يتم رسم المضلعات بحد أقصى وتعبئة. يمكنك تحديد قيم ودرجات تعتيم وألوان مخصّصة لحافة المضلّع (حد المضلّع) وألوان وتعتيمات مخصّصة للمنطقة المغلقة (التعبئة). ويجب الإشارة إلى الألوان بتنسيق HTML سداسي عشري. أسماء الألوان غير متوافقة.

يمكن لكائنات Polygon وصف أشكال معقدة، بما في ذلك:

• مناطق متعددة غير متجاورة يحددها مضلّع واحد.
• المناطق التي تحتوي على ثقوب
• تقاطعات منطقة واحدة أو أكثر.

لتحديد شكل معقد، يمكنك استخدام مضلّع به مسارات متعددة.

ملاحظة: توفّر طبقة البيانات طريقة بسيطة لرسم المضلّعات. تعالج هذه الميزة ملفات المضلع المتعرّج، ما يسهِّل رسم المضلّعات التي تحتوي على ثقوب. اطّلِع على مستندات طبقة البيانات.

إضافة مضلّع

وبما أنّ المنطقة المضلّعة قد تحتوي على عدة مسارات منفصلة، تحدّد السمة paths الخاصة بالعنصر Polygon مصفوفة من المصفوفات، وكل نوع من المصفوفات من النوع MVCArray. يحدّد كل مصفوفة تسلسلاً منفصلاً لإحداثيات LatLng المرتبة.

بالنسبة إلى المضلّعات البسيطة التي تتكون من مسار واحد فقط، يمكنك إنشاء Polygon باستخدام مصفوفة واحدة من إحداثيات LatLng. ستحوِّل واجهة برمجة تطبيقات JavaScript للخرائط المصفوفة البسيطة إلى مصفوفة من المصفوفات عند إنشائها عند تخزينها في السمة paths. توفّر واجهة برمجة التطبيقات طريقة getPath() بسيطة للمضلّعات التي تتألف من مسار واحد.

ملاحظة: إذا أنشأت مضلّعًا بسيطًا بهذه الطريقة، ستظل بحاجة إلى استرداد القيم من المضلّع من خلال معالجة المسار على شكل MVCArray.

تحدد السمة 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

ملاحظة: اقرأ الدليل حول استخدام TypeScript و"خرائط Google".

JavaScript

// 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

ملاحظة: يتم جمع JavaScript من مقتطف TypeScript.

الاطّلاع على مثال

تجربة "عيّنة"

JSFiddle.net Google Cloud Shell

الإكمال التلقائي للمضلّع

تتكوّن السمة Polygon في المثال أعلاه من أربع مجموعات من إحداثيات LatLng، ولكن يُرجى العلم أنّ المجموعتَين الأولى والأخيرة تحددان الموقع نفسه، ما يؤدي إلى إكمال حلقة التكرار. من الناحية العملية، بما أنّ المضلّعات تحدّد المناطق المغلقة، لن تحتاج إلى تحديد آخر مجموعة من الإحداثيات. ستكمل واجهة برمجة تطبيقات JavaScript للخرائط المضلّع تلقائيًا من خلال رسم خط مائل يربط الموقع الأخير مرة أخرى بالموقع الأول لأي مسار محدد.

يتطابق المثال التالي مع المثال السابق، باستثناء المثال الأخير الذي تم حذفه: عرض المثال.LatLng

إزالة مضلّع

لإزالة مضلّع من الخريطة، يمكنك طلب طريقة setMap() مع تمرير null كوسيطة. في المثال التالي، تمثّل bermudaTriangle كائنًا مضلّعًا:

bermudaTriangle.setMap(null);

لاحظ أن الطريقة أعلاه لا تحذف المضلّع. وسيؤدّي ذلك إلى إزالة المضلّع من الخريطة. وإذا أردت بدلاً من ذلك حذف المضلّع، عليك إزالته من الخريطة وضبط المضلّع نفسه على null.

تشبه إزالة المضلع إزالة أحد الخطوط المتعددة. للاطّلاع على رمز أحد الخطوط المتعددة: يمكنك الاطّلاع على مثال.

فحص المضلّع

يحدّد المضلّع سلسلة إحداثياته كمصفوفة من المصفوفات، حيث يكون كل صفيف من النوع MVCArray. كل مصفوفة "ورقة" هي مصفوفة من إحداثيات LatLng تحدّد مسارًا واحدًا. لاسترداد هذه الإحداثيات، يمكنك استدعاء طريقة getPaths() لكائن Polygon. بما أنّ المصفوفة هي MVCArray، عليك معالجتها وفحصها باستخدام العمليات التالية:

• تعرض getAt() القيمة LatLng في قيمة فهرس معيّنة تستند إلى صفر.
• تُدرِج السمة insertAt() قيمة LatLng تم تمريرها في قيمة فهرس معيّنة ذات قيمة صفرية. يُرجى العِلم أنّه يتم نقل أي إحداثيات حالية عند قيمة الفهرس إلى الأمام.
• تُزيل removeAt() السمة LatLng في قيمة فهرس معيّنة تستند إلى صفر.

ملاحظة: لا يمكنك استرداد العنصر i في مصفوفة باستخدام البنية mvcArray[i]. عليك استخدام mvcArray.getAt(i).

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

ملاحظة: اقرأ الدليل حول استخدام TypeScript و"خرائط Google".

JavaScript

// 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

ملاحظة: يتم جمع JavaScript من مقتطف TypeScript.

الاطّلاع على مثال

تجربة "عيّنة"

JSFiddle.net Google Cloud Shell

وضع ثقب في المضلّع

لإنشاء منطقة فارغة داخل مضلّع، عليك إنشاء مسارَين، أحدهما داخل الآخر. لإنشاء الثقب، يجب أن تكون الإحداثيات التي تحدّد المسار الداخلي بترتيب عكسي لتلك التي تحدّد المسار الخارجي. على سبيل المثال، إذا كانت إحداثيات المسار الخارجي بترتيب عقارب الساعة، يجب أن يكون المسار الداخلي عكس عقارب الساعة.

ملاحظة: تعالج طبقة البيانات ترتيب المسارات الداخلية والخارجية، ما يسهِّل رسم مضلّعات تحتوي على ثقوب. اطّلِع على مستندات طبقة البيانات.

يرسم المثال التالي مضلّعًا به مسارَين، ويظهر المسار الداخلي في الاتجاه المعاكس للمسار الخارجي.

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

ملاحظة: اقرأ الدليل حول استخدام TypeScript و"خرائط Google".

JavaScript

// 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

ملاحظة: يتم جمع JavaScript من مقتطف TypeScript.

الاطّلاع على مثال

تجربة "عيّنة"

JSFiddle.net Google Cloud Shell

المستطيلات

بالإضافة إلى فئة Polygon عامة، تتضمّن واجهة JavaScript API لتطبيق "خرائط Google" فئة محدّدة لكائنات 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

ملاحظة: اقرأ الدليل حول استخدام TypeScript و"خرائط Google".

JavaScript

// 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

ملاحظة: يتم جمع JavaScript من مقتطف TypeScript.

الاطّلاع على مثال

تجربة "عيّنة"

JSFiddle.net Google Cloud Shell

ينشئ الرمز التالي مستطيلاً في كل مرة يغير فيها المستخدم مستوى التكبير/التصغير على الخريطة. يتم تحديد حجم المستطيل من خلال إطار العرض.

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

ملاحظة: اقرأ الدليل حول استخدام TypeScript و"خرائط Google".

JavaScript

// 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

ملاحظة: يتم جمع JavaScript من مقتطف TypeScript.

الاطّلاع على مثال

تجربة "عيّنة"

JSFiddle.net Google Cloud Shell

إزالة مستطيل

لإزالة مستطيل من الخريطة، يمكنك طلب الطريقة setMap() مع ضبط null كوسيطة.

rectangle.setMap(null);

لاحظ أن الطريقة المذكورة أعلاه لا تحذف المستطيل. ويعمل الإجراء على إزالة المستطيل من الخريطة. إذا أردت حذف المستطيل بدلاً من ذلك، يجب إزالته من الخريطة، ثم ضبط المستطيل نفسه على null.

تشبه إزالة المستطيل إزالة الخطوط المتعددة. للاطّلاع على رمز تطبيق متعدد الخطوط: اطّلِع على مثال.

دوائر

بالإضافة إلى فئة Polygon العامة، تتضمّن واجهة JavaScript API لتطبيق "خرائط Google" فئة محددة لكائنات 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

ملاحظة: اقرأ الدليل حول استخدام TypeScript و"خرائط Google".

JavaScript

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

ملاحظة: يتم جمع JavaScript من مقتطف TypeScript.

الاطّلاع على مثال

تجربة "عيّنة"

JSFiddle.net Google Cloud Shell

إزالة دائرة

لإزالة دائرة من الخريطة، يمكنك طلب الطريقة 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	يتم إطلاقه عندما يتوقف المستخدم عن سحب الشكل.

لمزيد من المعلومات عن التعامل مع الأحداث، راجِع المستندات المتعلقة بالأحداث.