اطلاعات ویندوز

پلتفرم مورد نظر را انتخاب کنید: اندروید، iOS، جاوا اسکریپت

مقدمه

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