مقدمه
یک InfoWindow محتوا (معمولاً متن یا تصاویر) را در یک پنجره بازشو بالای نقشه، در یک مکان مشخص نمایش میدهد. پنجره اطلاعات دارای یک ناحیه محتوا و یک ساقه مخروطی است. نوک ساقه به یک مکان مشخص روی نقشه متصل است. پنجرههای اطلاعات به صورت یک کادر محاورهای برای خوانندگان صفحه نمایش ظاهر میشوند.
معمولاً یک پنجره اطلاعات را به یک نشانگر وصل میکنید، اما میتوانید یک پنجره اطلاعات را به یک طول/عرض جغرافیایی خاص نیز وصل کنید، همانطور که در بخش افزودن یک پنجره اطلاعات در زیر توضیح داده شده است.
به طور کلی، پنجرههای اطلاعات نوعی پوشش هستند. برای اطلاعات بیشتر در مورد انواع دیگر پوشش، به بخش «طراحی روی نقشه» مراجعه کنید.
یک پنجره اطلاعات اضافه کنید
سازندهی InfoWindow یک شیء InfoWindowOptions به صورت تحتاللفظی میگیرد که پارامترهای اولیه برای نمایش پنجرهی اطلاعات را مشخص میکند.
شیء InfoWindowOptions به صورت تحتاللفظی شامل فیلدهای زیر است:
-
contentشامل یک رشته متن یا یک گره DOM برای نمایش در پنجره اطلاعات است. -
pixelOffsetشامل یک فاصله از نوک پنجره اطلاعات تا مکانی است که پنجره اطلاعات در آن قرار دارد. در عمل، نیازی به مشخص کردن این فیلد نیست. میتوانید آن را روی مقدار پیشفرض بگذارید. -
positionشاملLatLngاست که این پنجره اطلاعات در آن لنگر انداخته شده است. توجه: یکInfoWindowمیتواند یا به یک شیءMarkerمتصل شود (که در این صورت موقعیت آن بر اساس موقعیت نشانگر است) یا روی خود نقشه در یکLatLngمشخص شده قرار گیرد. یکی از راههای بازیابیLatLngاستفاده از سرویس Geocoding است. باز کردن یک پنجره اطلاعات روی یک نشانگر،positionبه طور خودکار بهروزرسانی میکند. -
maxWidthحداکثر عرض پنجره اطلاعات را بر حسب پیکسل مشخص میکند. به طور پیشفرض، یک پنجره اطلاعات متناسب با محتوایش گسترش مییابد و اگر پنجره اطلاعات نقشه را پر کند، متن به طور خودکار پیچیده میشود. اگرmaxWidthرا اضافه کنید، پنجره اطلاعات به طور خودکار پیچیده میشود تا عرض مشخص شده را اعمال کند. اگر به حداکثر عرض برسد و فضای عمودی روی صفحه وجود داشته باشد، پنجره اطلاعات ممکن است به صورت عمودی گسترش یابد.
محتوای InfoWindow میتواند شامل یک رشته متن، یک قطعه کد HTML یا یک عنصر DOM باشد. برای تنظیم محتوا، یا آن را در InfoWindowOptions مشخص کنید یا تابع setContent() را به طور صریح روی InfoWindow فراخوانی کنید.
اگر میخواهید اندازه محتوا را به طور صریح تغییر دهید، میتوانید آن را در یک عنصر <div> قرار دهید و <div> را با CSS استایلبندی کنید. میتوانید از CSS برای فعال کردن پیمایش نیز استفاده کنید. توجه داشته باشید که اگر پیمایش را فعال نکنید و محتوا از فضای موجود در پنجره اطلاعات فراتر رود، ممکن است محتوا از پنجره اطلاعات بیرون بریزد.
باز کردن پنجره اطلاعات
وقتی یک پنجره اطلاعات ایجاد میکنید، به طور خودکار روی نقشه نمایش داده نمیشود. برای قابل مشاهده کردن پنجره اطلاعات، باید متد open() را در InfoWindow فراخوانی کنید و یک شیء InfoWindowOpenOptions به صورت تحتاللفظی که گزینههای زیر را مشخص میکند، به آن ارسال کنید:
-
map، نقشه یا پانورامای نمای خیابان را که باید روی آن باز شود، مشخص میکند. -
anchorحاوی یک نقطه anchor (مثلاً یکMarker) است. اگر گزینهanchornullیا تعریف نشده باشد، پنجره info در ویژگیpositionآن باز میشود.
تایپ اسکریپت
// This example displays a marker at the center of Australia. // When the user clicks the marker, an info window opens. async function initMap(): Promise<void> { // Import the needed libraries. await google.maps.importLibrary("maps"); await google.maps.importLibrary("marker"); // Get the map element and the inner map from it. const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; const innerMap = mapElement.innerMap; // Get the center of the map. const center = mapElement.center; // Create the info window content. const heading = document.createElement("h1"); heading.textContent = "Uluru (Ayers Rock)"; const content = document.createElement("div"); const infoParagraph = document.createElement("p"); infoParagraph.textContent = `Uluru, also referred to as Ayers Rock, 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.`; content.appendChild(infoParagraph); const link = document.createElement("a"); link.href = "https://en.wikipedia.org/w/index.php?title=Uluru"; link.textContent = "https://en.wikipedia.org/w/index.php?title=Uluru"; link.target = "_blank"; content.appendChild(link); // Create the info window. const infowindow = new google.maps.InfoWindow({ headerContent: heading, content: content, ariaLabel: "Uluru", maxWidth: 500, // Set max width (optional). }); // Create the marker. const marker = new google.maps.marker.AdvancedMarkerElement({ position: center, map: innerMap, title: "Uluru (Ayers Rock)", gmpClickable: true, }); // Open the info window when the map loads. infowindow.open({ anchor: marker, map: innerMap, }); // Open the info window when the marker is clicked. marker.addEventListener("gmp-click", () => { infowindow.open({ anchor: marker, map: innerMap, }); }); } initMap();
جاوا اسکریپت
// This example displays a marker at the center of Australia. // When the user clicks the marker, an info window opens. async function initMap() { // Import the needed libraries. await google.maps.importLibrary("maps"); await google.maps.importLibrary("marker"); // Get the map element and the inner map from it. const mapElement = document.querySelector('gmp-map'); const innerMap = mapElement.innerMap; // Get the center of the map. const center = mapElement.center; // Create the info window content. const heading = document.createElement("h1"); heading.textContent = "Uluru (Ayers Rock)"; const content = document.createElement("div"); const infoParagraph = document.createElement("p"); infoParagraph.textContent = `Uluru, also referred to as Ayers Rock, 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.`; content.appendChild(infoParagraph); const link = document.createElement("a"); link.href = "https://en.wikipedia.org/w/index.php?title=Uluru"; link.textContent = "https://en.wikipedia.org/w/index.php?title=Uluru"; link.target = "_blank"; content.appendChild(link); // Create the info window. const infowindow = new google.maps.InfoWindow({ headerContent: heading, content: content, ariaLabel: "Uluru", maxWidth: 500, // Set max width (optional). }); // Create the marker. const marker = new google.maps.marker.AdvancedMarkerElement({ position: center, map: innerMap, title: "Uluru (Ayers Rock)", gmpClickable: true, }); // Open the info window when the map loads. infowindow.open({ anchor: marker, map: innerMap, }); // Open the info window when the marker is clicked. marker.addEventListener("gmp-click", () => { infowindow.open({ anchor: marker, map: innerMap, }); }); } initMap();
نمونه را امتحان کنید
مثال زیر maxWidth یک پنجره اطلاعات را تنظیم میکند: view example .
تنظیم فوکوس روی یک پنجره اطلاعات
برای تنظیم فوکوس روی یک پنجره اطلاعات، متد focus() آن را فراخوانی کنید. قبل از تنظیم فوکوس، استفاده از این متد را همراه با یک رویداد visible در نظر بگیرید. فراخوانی این متد روی یک پنجره اطلاعات غیرقابل مشاهده هیچ تاثیری نخواهد داشت. برای قابل مشاهده کردن یک پنجره اطلاعات، متد open() را فراخوانی کنید.
بستن پنجره اطلاعات
به طور پیشفرض، یک پنجره اطلاعات تا زمانی که کاربر روی کنترل بستن (علامت ضربدر در بالا سمت راست پنجره اطلاعات) کلیک نکند یا کلید ESC را فشار ندهد، باز میماند. همچنین میتوانید با فراخوانی متد close() آن، پنجره اطلاعات را به طور صریح ببندید.
وقتی یک پنجره اطلاعات بسته میشود، فوکوس به عنصری که قبل از باز شدن پنجره اطلاعات در فوکوس بوده است، برمیگردد. اگر آن عنصر در دسترس نباشد، فوکوس به نقشه برمیگردد. برای لغو این رفتار، میتوانید به رویداد closeclick گوش دهید و فوکوس را به صورت دستی مدیریت کنید، همانطور که در مثال زیر نشان داده شده است:
infoWindow.addListener('closeclick', ()=>{ // Handle focus manually. });
جابجایی یک پنجره اطلاعات
چند راه برای تغییر مکان یک پنجره اطلاعات وجود دارد:
- فراخوانی تابع
setPosition()در پنجره اطلاعات، یا - پنجره اطلاعات را با استفاده از متد
InfoWindow.open()به یک نشانگر جدید متصل کنید. نکته: اگر تابعopen()را بدون ارسال نشانگر فراخوانی کنید،InfoWindowاز موقعیتی که هنگام ساخت از طریق شیءInfoWindowOptionsبه صورت تحتاللفظی مشخص شده است، استفاده خواهد کرد.
سفارشیسازی
کلاس InfoWindow امکان سفارشیسازی ندارد. در عوض، برای مشاهدهی نحوهی ایجاد یک پنجرهی کاملاً سفارشی، به مثال پنجرهی پاپآپ سفارشیسازیشده مراجعه کنید.