أشكال

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
اختَر النظام الأساسي: Android iOS JavaScript

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

خطوط متعددة

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

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

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

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

  • يحدّد strokeColor لون HTML سداسي عشري بالتنسيق "#FFFFFF". لا تتوافق الفئة Polyline مع الألوان المُسمّاة.
  • strokeOpacity يحدّد قيمة رقمية بين 0.0 و1.0 لتحديد تعتيم الخط. والقيمة التلقائية هي 1.0.
  • تحدّد strokeWeight عرض الخط بالبكسل.

تحدّد السمة editable في polyline' ما إذا كان بإمكان المستخدمين تعديل الشكل. راجِع الأشكال القابلة للتعديل للمستخدم أدناه. وبالمثل، يمكنك ضبط السمة 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;

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;
عرض مثال

جرّب عيّنة

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

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

flightPath.setMap(null);

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

فحص الخط المتعدد

يحدّد الخط المتعدد سلسلة من الإحداثيات كمصفوفة من عناصر 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);

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

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;
عرض مثال

جرّب عيّنة

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

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

المضلعات

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

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

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

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

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

إضافة مضلّع

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

بالنسبة إلى المضلّعات البسيطة التي تتألف من مسار واحد فقط، يمكنك إنشاء Polygon باستخدام مصفوفة واحدة من إحداثيات LatLng. ستحوّل واجهة برمجة تطبيقات JavaScript للخرائط الصفيف البسيط إلى مصفوفة من المصفوفات عند الإنشاء عند تخزينها ضمن السمة paths. توفّر واجهة برمجة التطبيقات طريقة 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;

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;
عرض مثال

جرّب عيّنة

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

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

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

إزالة مضلع

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

bermudaTriangle.setMap(null);

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

فحص مضلع

يحدد المضلّع سلسلة إحداثياته كمصفوفة من المصفوفات، حيث يكون كل مصفوفة من النوع MVCArray. تمثّل كل مصفوفة "leaf"quot;مصفوفة" مجموعة من إحداثيات LatLng تحدّد مسارًا واحدًا. لاسترداد هذه الإحداثيات، يجب استدعاء طريقة Polygon الكائن getPaths(). بما أنّ المصفوفة هي 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;

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;
عرض مثال

جرّب عيّنة

أدخِل ثقبًا في مضلّع.

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

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

يرسم المثال التالي مضلعًا يحتوي على مسارين، مع إضافة مسار داخلي إليه في الاتجاه العكسي إلى المسار الخارجي.

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;

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;
عرض مثال

جرّب عيّنة

مستطيلات

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

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;
عرض مثال

جرّب عيّنة

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

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;

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;
عرض مثال

جرّب عيّنة

إزالة مستطيل

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

rectangle.setMap(null);

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

الدوائر

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

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;
عرض مثال

جرّب عيّنة

إزالة دائرة

لإزالة دائرة من الخريطة، عليك استدعاء طريقة 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

يجب ضبط المستمع على مسار polyline&#39s.

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

لمزيد من المعلومات حول معالجة الأحداث، يمكنك الاطّلاع على مستندات الأحداث.