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

اختيار النظام الأساسي: Android iOS JavaScript
  1. المقدمة
  2. إضافة نافذة معلومات
  3. فتح نافذة معلومات
  4. إغلاق نافذة المعلومات
  5. نقل نافذة معلومات

مقدمة

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

نافذة 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.

TypeScript

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

JavaScript

// 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 إمكانية التخصيص. بدلاً من ذلك، يمكنك الاطّلاع على مثال على نافذة منبثقة مخصّصة لمعرفة كيفية إنشاء نافذة منبثقة مخصّصة بالكامل.