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

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