أشكال

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

خطوط متعددة

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

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

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

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

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

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

المثال التالي متطابق مع المثال السابق، باستثناء أنّه تم حذف آخر 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.');
});

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

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

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

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