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

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

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

لرسم خط على الخريطة، استخدم أحد الخطوط المتعددة. تشير رسالة الأشكال البيانية الفئة 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 عامة، يمكن لخدمة "خرائط Google" تتضمن واجهة برمجة تطبيقات JavaScript فئة محددة 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 العامة، تتيح لك "خرائط Google" تتضمن واجهة برمجة تطبيقات JavaScript فئة محددة 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.');
});

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

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

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

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