الأشكال

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

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

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

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

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

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

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

تحدّد السمة editable الخاصة بالخطوط المتعددة ما إذا كان بإمكان المستخدمين تعديل الشكل. اطّلِع على أشكال قابلة للتعديل بواسطة المستخدم أدناه. وبالمثل، يمكنك إعداد السمة draggable للسماح للمستخدمين بسحب الخط.

// 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، يمكنك التحكّم بشكل كبير في شكل الخطوط المتعددة على خريطتك. راجع الرموز للحصول على معلومات حول arrows والخطوط المتقطعة والرموز المخصصة والرموز المتحركة.

مضلعات

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

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

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

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

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

إضافة مضلّع

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

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

تحدّد سمة editable الخاصة بالمضلع ما إذا كان بإمكان المستخدمين تعديل الشكل أم لا. اطّلِع على الأشكال القابلة للتعديل بواسطة المستخدم أدناه. وبالمثل، يمكنك ضبط السمة draggable للسماح للمستخدمين بسحب الشكل.

// 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، ولكن لاحظ أن المجموعتين الأولى والأخيرة تحددان الموقع نفسه، ما يؤدي إلى إكمال التكرار الحلقي. أمّا من الناحية العملية، فلا تحتاج إلى تحديد آخر مجموعة من الإحداثيات لأنّ المضلعات تحدد المناطق المغلقة. وستكمل واجهة برمجة تطبيقات JavaScript للخرائط المضلع تلقائيًا من خلال رسم ضربة تربط الموقع الأخير مرة أخرى بالموقع الأول لأي مسار محدد.

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

إزالة مضلع

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

bermudaTriangle.setMap(null);

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

فحص المضلع

يحدد المضلّع سلسلة إحداثياته كصفيف من الصفائف، حيث يكون كل صفيف من النوع MVCArray. كل صفيف "ورقة" هو مصفوفة من إحداثيات 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

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

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

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

يرسم المثال التالي مضلعًا بمسارين، مع إدراج المسار الداخلي في الاتجاه المقابل للمسار الخارجي.

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

إضافة مستطيل

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

على عكس Polygon، لا يمكنك تحديد paths للسمة Rectangle. بدلاً من ذلك، يتضمّن المستطيل السمة bounds التي تحدد شكله من خلال تحديد google.maps.LatLngBounds للمستطيل.

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

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

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

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

إضافة دائرة

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

على عكس Polygon، لا يمكنك تحديد paths للسمة Circle. بدلاً من ذلك، يكون للدائرة سمتان إضافيتان تحددان شكلها:

• center: تحدّد هذه السمة google.maps.LatLng في وسط الدائرة.
• يحدد radius نصف قطر الدائرة بالمتر.

وتحدد السمة editable الخاصة بالدائرة ما إذا كان بإمكان المستخدمين تعديل الشكل أو لا. اطّلِع على الأشكال القابلة للتعديل بواسطة المستخدم أدناه. وبالمثل، يمكنك ضبط السمة draggable للسماح للمستخدمين بسحب الدائرة.

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

إزالة دائرة

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

عرض مثال

الاستماع إلى تعديل الأحداث

عند تعديل شكل، يتم تنشيط الحدث عند اكتمال التعديل. وقد تم إدراج هذه الفعاليات أدناه.

بعض مقتطفات الرموز المفيدة:

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.');
});

اطّلِع على مثال للتعامل مع حدث تعديل على مستطيل: اطّلِع على مثال.

الاستماع إلى سحب الأحداث

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

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