اطلاعات Windows

انتخاب پلاتفرم: Android iOS JavaScript

مقدمه

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 برای فعال کردن پیمایش نیز استفاده کنید. توجه داشته باشید که اگر پیمایش را فعال نکنید و محتوا از فضای موجود در پنجره اطلاعات فراتر رود، ممکن است محتوا از پنجره اطلاعات بیرون بریزد.

روش‌های مطلوب: برای داشتن بهترین تجربه کاربری، در هر زمان فقط یک پنجره اطلاعات باید در نقشه باز باشد. چندین پنجره اطلاعات باعث می‌شود نقشه شلوغ به‌نظر برسد. اگر فقط به یک پنجره اطلاعات در هر زمان نیاز دارید، می‌توانید فقط یک شیء InfoWindow ایجاد کنید و آن را در مکان‌ها یا نشانگرهای مختلف در رویدادهای نقشه، مانند کلیک‌های کاربر، باز کنید. اگر به بیش‌از یک پنجره اطلاعات نیاز دارید، می‌توانید چندین شیء InfoWindow را به‌طور هم‌زمان نمایش دهید.

باز کردن پنجره اطلاعات

وقتی پنجره اطلاعاتی ایجاد می‌کنید، به‌طور خودکار در نقشه نمایش داده نمی‌شود. برای اینکه پنجره اطلاعات نمایان شود، باید متد 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.

async function init(): Promise<void> {
    // Import the needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        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 InfoWindow({
        headerContent: heading,
        content,
        ariaLabel: 'Uluru',
        maxWidth: 500, // Set max width (optional).
    });

    // Create the marker.
    const marker = new 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,
        });
    });
}

void init();
index.ts

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

JavaScript

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

async function init() {
    // Import the needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        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 InfoWindow({
        headerContent: heading,
        content,
        ariaLabel: 'Uluru',
        maxWidth: 500, // Set max width (optional).
    });

    // Create the marker.
    const marker = new 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,
        });
    });
}

void init();
index.js

مشاهده نمونه

مثال زیر maxWidth پنجره اطلاعات را تنظیم می‌کند: مشاهده مثال.

تمرکز روی پنجره اطلاعات

برای تنظیم کردن فوکوس روی پنجره اطلاعات، روش focus() آن را فراخوانی کنید. پیشنهاد می‌شود از این روش همراه با رویداد visible قبل‌از تنظیم کردن تمرکز استفاده کنید. فراخوانی این روش در پنجره اطلاعات غیرقابل‌مشاهده تأثیری نخواهد داشت. برای نمایان کردن پنجره اطلاعات، open() «تماس» را فشار دهید.

بستن پنجره اطلاعات

به‌طور پیش‌فرض، پنجره اطلاعات تا زمانی که کاربر روی کنترل بستن (یک علامت ضربدر در بالا سمت راست پنجره اطلاعات) کلیک نکند یا کلید ESC را فشار ندهد، باز می‌ماند. همچنین می‌توانید پنجره اطلاعات را با فراخوانی روش close() آن به‌طور صریح ببندید.

وقتی پنجره اطلاعات بسته می‌شود، تمرکز به عنصری که قبل‌از باز شدن پنجره اطلاعات در تمرکز بوده است برمی‌گردد. اگر آن عنصر دردسترس نباشد، تمرکز به نقشه برمی‌گردد. برای لغو این رفتار، می‌توانید به رویداد closeclick گوش دهید و تمرکز را به‌صورت دستی مدیریت کنید، همان‌طور که در مثال زیر نشان داده شده است:

infoWindow.addListener('closeclick', ()=>{
  // Handle focus manually.
});

جابه‌جا کردن پنجره اطلاعات

چند روش برای تغییر مکان پنجره اطلاعات وجود دارد:

• در پنجره اطلاعات با setPosition() تماس بگیرید، یا
• پنجره اطلاعات را بااستفاده از روش InfoWindow.open() به نشانگر جدیدی متصل کنید. توجه: اگر open() را بدون ارسال نشانگر فراخوانی کنید، InfoWindow از موقعیت مشخص‌شده هنگام ساخت ازطریق حرفی InfoWindowOptions استفاده خواهد کرد.