نوافذ المعلومات

1. المقدمة
2. إضافة نافذة معلومات
3. فتح نافذة معلومات
4. إغلاق نافذة معلومات
5. نقل نافذة معلومات

المقدمة

تعرض InfoWindow محتوى (عادةً ما يكون نصًا أو صورًا) في نافذة منبثقة أعلى الخريطة في موقع جغرافي معيّن. وتحتوي نافذة المعلومات على منطقة محتوى وجذع مدبّب. يتم إرفاق رأس الجذعية بموقع محدد على الخريطة. تظهر نوافذ المعلومات كمربع حوار لقارئ الشاشة.

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

بشكل عام، إنّ نوافذ المعلومات هي نوع من التراكبات. للحصول على معلومات عن أنواع أخرى من التراكبات، يمكنك الاطّلاع على الرسم على الخريطة.

إضافة نافذة معلومات

تستخدم دالة الإنشاء InfoWindow كائن InfoWindowOptions الحرفي، الذي يحدد المعلمات المبدئية لعرض نافذة المعلومات.

يحتوي الكائن الحرفي InfoWindowOptions على الحقول التالية:

• يحتوي content على سلسلة من النص أو عقدة DOM لعرضها في نافذة المعلومات.
• يحتوي pixelOffset على إزاحة من رأس نافذة المعلومات إلى الموقع الذي تم تثبيت نافذة المعلومات عليه. من الناحية العملية، لن تحتاج إلى تحديد هذا الحقل. ويمكنك تركها عند القيمة التلقائية.
• يحتوي position على LatLng التي يتم إرساء نافذة المعلومات فيها. ملاحظة: قد يتم ربط InfoWindow إما بالكائن Marker (في هذه الحالة يعتمد موضعه على موقع العلامة) أو على الخريطة نفسها في علامة LatLng محددة. تتمثل إحدى طرق استرداد LatLng في استخدام خدمة الترميز الجغرافي. سيؤدي فتح نافذة معلومات على محدّد موقع إلى تعديل position تلقائيًا.
• تحدّد maxWidth الحد الأقصى لعرض نافذة المعلومات بالبكسل. يتم تلقائيًا توسيع نافذة المعلومات لتناسب محتواها كما يتم لف النص تلقائيًا إذا ملأت نافذة المعلومات الخريطة. في حال إضافة maxWidth، سيتم التفاف نافذة المعلومات تلقائيًا لفرض العرض المحدَّد. إذا وصلت إلى الحد الأقصى للعرض وكانت هناك غرفة عمودية على الشاشة، قد يتم توسيع نافذة المعلومات عموديًا.

قد يتضمّن محتوى InfoWindow سلسلة نصية أو مقتطف HTML أو عنصر DOM. لضبط المحتوى، يجب إمّا تحديده من خلال InfoWindowOptions أو استدعاء setContent() على InfoWindow بوضوح.

إذا أردت تحديد حجم المحتوى بوضوح، يمكنك وضعه في عنصر <div> ونمط <div> باستخدام CSS. يمكنك استخدام CSS لتمكين التمرير أيضًا. يُرجى العِلم بأنّه إذا لم يتم تفعيل التمرير وتجاوز المحتوى المساحة المتاحة في نافذة المعلومات، قد يندفع المحتوى خارج نافذة المعلومات.

فتح نافذة معلومات

عند إنشاء نافذة معلومات، لا يتم عرضها تلقائيًا على الخريطة. لإظهار نافذة المعلومات، يجب استدعاء طريقة open() على InfoWindow، مع تمرير كائن InfoWindowOpenOptions حرفيًا مع تحديد الخيارات التالية:

• تحدد map الخريطة أو بانوراما التجوّل الافتراضي التي سيتم فتحها.
• يحتوي anchor على نقطة ارتساء (على سبيل المثال Marker). إذا كان الخيار anchor هو null أو غير محدّد، سيتم فتح نافذة المعلومات في السمة position.

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap(): void {
  const uluru = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  const contentString =
    '<div id="content">' +
    '<div id="siteNotice">' +
    "</div>" +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
    "sandstone rock formation in the southern part of the " +
    "Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;mi) by road. Kata Tjuta and Uluru are the two major " +
    "features of the Uluru - Kata Tjuta National Park. Uluru is " +
    "sacred to the Pitjantjatjara and Yankunytjatjara, the " +
    "Aboriginal people of the area. It has many springs, waterholes, " +
    "rock caves and ancient paintings. Uluru is listed as a World " +
    "Heritage Site.</p>" +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    "https://en.wikipedia.org/w/index.php?title=Uluru</a> " +
    "(last visited June 22, 2009).</p>" +
    "</div>" +
    "</div>";

  const infowindow = new google.maps.InfoWindow({
    content: contentString,
    ariaLabel: "Uluru",
  });

  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });

  marker.addListener("click", () => {
    infowindow.open({
      anchor: marker,
      map,
    });
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
function initMap() {
  const uluru = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  const contentString =
    '<div id="content">' +
    '<div id="siteNotice">' +
    "</div>" +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
    "sandstone rock formation in the southern part of the " +
    "Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;mi) by road. Kata Tjuta and Uluru are the two major " +
    "features of the Uluru - Kata Tjuta National Park. Uluru is " +
    "sacred to the Pitjantjatjara and Yankunytjatjara, the " +
    "Aboriginal people of the area. It has many springs, waterholes, " +
    "rock caves and ancient paintings. Uluru is listed as a World " +
    "Heritage Site.</p>" +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    "https://en.wikipedia.org/w/index.php?title=Uluru</a> " +
    "(last visited June 22, 2009).</p>" +
    "</div>" +
    "</div>";
  const infowindow = new google.maps.InfoWindow({
    content: contentString,
    ariaLabel: "Uluru",
  });
  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });

  marker.addListener("click", () => {
    infowindow.open({
      anchor: marker,
      map,
    });
  });
}

window.initMap = initMap;
index.js

يحدّد المثال التالي maxWidth لنافذة المعلومات: عرض المثال.

ضبط التركيز على نافذة معلومات

لضبط التركيز على نافذة معلومات، يمكنك استدعاء طريقة focus() الخاصة بها. ننصحك باستخدام هذه الطريقة مع حدث visible قبل ضبط التركيز. لن يكون لاستدعاء هذه الطريقة في نافذة معلومات غير مرئية أي تأثير. يمكنك الاتصال بالرقم open() لإظهار نافذة معلومات.

إغلاق نافذة معلومات

بشكل افتراضي، تظل نافذة المعلومات مفتوحة إلى أن ينقر المستخدم على عنصر التحكم في الإغلاق (علامة × أعلى يسار نافذة المعلومات)، أو يضغط على مفتاح ESC. يمكنك أيضًا إغلاق نافذة المعلومات بشكل صريح من خلال الاتصال بمنهج close() الخاص به.

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

infoWindow.addListener('closeclick', ()=>{
  // Handle focus manually.
});

نقل نافذة معلومات

هناك طريقتان لتغيير موقع نافذة المعلومات:

• الاتصال بالرقم setPosition() في نافذة المعلومات
• أرفِق نافذة المعلومات بعلامة جديدة باستخدام طريقة InfoWindow.open(). ملاحظة: إذا تم استدعاء open() بدون تمرير محدّد موقع، سيستخدم InfoWindow الموضع المحدّد عند الإنشاء من خلال الكائن InfoWindowOptions الحرفي.

التخصيص

لا توفر الفئة InfoWindow إمكانية التخصيص. يمكنك بدلاً من ذلك الاطّلاع على مثال للنافذة المنبثقة المخصّصة لمعرفة كيفية إنشاء نافذة منبثقة مخصّصة بالكامل.