مقدمة
إنّ
يعرض InfoWindow
محتوى (يكون عادةً نصًا أو صورًا) في
نافذة منبثقة فوق الخريطة، في موقع معين. هناك محتوى في نافذة المعلومات
منطقة وجذع مدبب. يتم ربط رأس الساق بعنصر
موقعك على الخريطة. تظهر نوافذ المعلومات كمربّع حوار لقارئات الشاشة.
![نافذة InfoWindow تعرض معلومات حول موقع جغرافي في أستراليا](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/documentation/javascript/images/info-window.png?authuser=0000&hl=ar)
سوف ترفق عادةً نافذة معلومات محدد، ولكن يمكنك أيضًا إرفاق نافذة معلومات بخط عرض/خط طول معين، كما هو موضح في عن إضافة نافذة معلومات أدناه.
بشكل عام، نوافذ المعلومات هي نوع من التراكب. للحصول على معلومات عن أنواعًا أخرى من التراكب، راجع الرسم على الخريطة:
إضافة نافذة معلومات
صفحة
تأخذ الدالة الإنشائية 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
إمكانية تخصيص. بدلاً من ذلك،
اطّلِع على
تخصيص
مثال على نافذة منبثقة
للاطّلاع على طريقة إنشاء نافذة منبثقة مخصَّصة بالكامل