أشكال

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

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

لرسم خط على خريطتك، استخدِم خطًا متعدد الأضلاع. تحدد فئة 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، لديك الكثير من التحكم في مظهر وجوهر الخطوط المتعددة على خريطتك. راجع الرموز للحصول على معلومات حول الأسهم والخطوط المتقطعة والرموز المخصصة والرموز المتحركة.

المضلعات

يمثّل المضلّع مساحة محاطة بمسار (أو حلقة) مغلق، يتم تحديده بواسطة سلسلة من الإحداثيات. تكون كائنات 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 من "خرائط 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 في "خرائط 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.');
});

شاهد مثالاً على التعامل مع حدث تعديل على مستطيل: عرض المثال.

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

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

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