مقدمة
يعرض
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 km (208 mi) " + "south west of the nearest large town, Alice Springs; 450 km " + "(280 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;
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 km (208 mi) " + "south west of the nearest large town, Alice Springs; 450 km " + "(280 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;
تجربة العينة
يحدّد المثال التالي السمة maxWidth
لنافذة معلومات:
عرض المثال.
ضبط التركيز على نافذة معلومات
لضبط التركيز على نافذة معلومات، يمكنك طلب طريقة focus()
الخاصة بها. يمكنك استخدام هذه الطريقة مع فعالية visible
قبل ضبط التركيز. ولن يكون لاستدعاء هذه الطريقة في نافذة معلومات غير مرئية أي تأثير. يمكنك الاتصال بالرقم open()
لإظهار نافذة معلومات.
إغلاق نافذة معلومات
تظل نافذة المعلومات مفتوحة تلقائيًا إلى أن ينقر المستخدم على عنصر التحكّم في الإغلاق (رمز متقاطع في أعلى يسار نافذة المعلومات) أو يضغط على مفتاح الخروج (Esc).
يمكنك أيضًا إغلاق نافذة المعلومات صراحةً من خلال طلب طريقة close()
.
عند إغلاق نافذة المعلومات، يعود التركيز إلى العنصر الذي كان
محل التركيز قبل فتح نافذة المعلومات. وإذا لم يكن ذلك العنصر متاحًا،
سيتم نقل التركيز إلى الخريطة. لإلغاء هذا السلوك، يمكنك الاستماع إلى حدث closeclick
وإدارة التركيز يدويًا على النحو الموضّح في المثال التالي:
infoWindow.addListener('closeclick', ()=>{ // Handle focus manually. });
نقل نافذة معلومات
هناك طريقتان لتغيير موقع نافذة المعلومات:
- الاتصال بـ "
setPosition()
" من نافذة المعلومات - أرفِق نافذة المعلومات بمحدِّد جديد باستخدام
طريقة
InfoWindow.open()
. ملاحظة: إذا طلبتopen()
بدون تمرير علامة، سيستخدمInfoWindow
الموضع المحدّد عند الإنشاء من خلال الكائنInfoWindowOptions
حرفيًا.
التخصيص
لا توفّر الفئة InfoWindow
إمكانية التخصيص. بدلاً من ذلك، يمكنك الاطّلاع على مثال على نافذة منبثقة مخصّصة لمعرفة كيفية إنشاء نافذة منبثقة مخصّصة بالكامل.