Bilgi Pencereleri

Platform seçin: Android iOS JavaScript
  1. Giriş
  2. Bilgi penceresi ekleme
  3. Bilgi penceresini açma
  4. Bilgi penceresini kapatma
  5. Bilgi penceresini taşıma

Giriş

Bir InfoWindow, içeriği (genellikle metin veya resimler) haritanın üzerinde bir pop-up pencerede, belirli bir konumda görüntüler. Bilgi penceresinde bir içerik alanı ve bantlı bir sap var. Sapın ucu, haritadaki belirli bir konuma eklenir. Bilgi pencereleri, ekran okuyucular için bir İletişim Kutusu olarak görünür.

Avustralya'daki bir konum hakkındaki bilgilerin gösterildiği bir bilgi penceresi.

Genellikle işaretçiye bilgi penceresi eklersiniz ancak aşağıda bilgi penceresi ekleme bölümünde açıklandığı gibi belirli bir enlem/boylam için bilgi penceresi de ekleyebilirsiniz.

Genel olarak, bilgi pencereleri bir tür yer paylaşımıdır. Diğer bindirme türleri hakkında bilgi edinmek için Haritada çizim konusuna göz atın.

Bilgi penceresi ekleme

InfoWindow oluşturucu, bilgi penceresinin görüntülenmesi için ilk parametreleri belirten bir InfoWindowOptions nesne değişmez değeri alır.

InfoWindowOptions nesne değişmez değeri, aşağıdaki alanları içerir:

  • content, bilgi penceresinde gösterilecek bir metin dizesi veya DOM düğümü içerir.
  • pixelOffset, bilgi penceresinin ucundan bilgi penceresinin sabitlendiği konuma göre bir ofset içerir. Pratikte, bu alanı belirtmeniz gerekmez. Varsayılan değerde bırakabilirsiniz.
  • position, bu bilgi penceresinin sabitlendiği LatLng değerini içerir. Not: InfoWindow, bir Marker nesnesine (bu durumda konumu, işaretçinin konumuna bağlıdır) veya belirtilen LatLng konumundaki haritanın üzerine eklenebilir. LatLng almanın bir yolu, Coğrafi Kodlama hizmetini kullanmaktır. İşaretçide bilgi penceresi açıldığında position öğesi otomatik olarak güncellenir.
  • maxWidth, bilgi penceresinin maksimum genişliğini piksel cinsinden belirtir. Varsayılan olarak, bilgi penceresi içeriğine uygun şekilde genişler ve bilgi penceresi haritayı doldurduğunda metni otomatik olarak sarmalar. Bir maxWidth eklerseniz bilgi penceresi, belirtilen genişliği uygulamak için otomatik olarak sarmalanır. Belirlenen maksimum değere ulaşırsa ve ekranda dikey alan varsa bilgi penceresi dikey olarak genişleyebilir.

InfoWindow içeriği, bir metin dizesi, HTML snippet'i veya DOM öğesi içerebilir. İçeriği ayarlamak için içeriği InfoWindowOptions içinde belirtin veya InfoWindow sayfasında açıkça setContent() öğesini arayın.

İçeriği açık bir şekilde boyutlandırmak isterseniz bir <div> öğesine yerleştirebilir ve <div> öğesini CSS ile biçimlendirebilirsiniz. Kaydırma özelliğini etkinleştirmek için CSS'yi de kullanabilirsiniz. Kaydırma özelliğini etkinleştirmezseniz ve bilgi bilgi penceresindeki alanı aşarsa içerik, bilgi penceresinin dışına taşabilir.

Bilgi penceresi açma

Bilgi penceresi oluşturduğunuzda, haritada otomatik olarak görüntülenmez. Bilgi penceresini görünür hale getirmek için aşağıdaki seçenekleri belirten bir InfoWindowOpenOptions nesnesi değişmez değeri ile InfoWindow öğesinde open() yöntemini çağırmanız gerekir:

  • map, açılacak haritayı veya Street View panoramasını belirtir.
  • anchor bir sabitleme noktası içeriyor (örneğin, Marker). anchor seçeneği null ise veya tanımlanmamışsa bilgi penceresi, position özelliğinde açılır.
  • shouldFocus, odaktaki bilgi penceresinin açıldığında bilgi penceresinin içine taşınıp taşınmayacağını belirtir.

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&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;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,
  });

  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });

  marker.addListener("click", () => {
    infowindow.open({
      anchor: marker,
      map,
      shouldFocus: false,
    });
  });
}

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&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;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,
  });
  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });

  marker.addListener("click", () => {
    infowindow.open({
      anchor: marker,
      map,
      shouldFocus: false,
    });
  });
}

window.initMap = initMap;
Örneği göster

Örneği Dene

Aşağıdaki örnekte, bilgi penceresinin maxWidth değeri ayarlanır: örneği görüntüleyin.

Bilgi penceresine odaklanma

Bir bilgi penceresine odaklanmak için o pencerenin focus() yöntemini çağırın. Odaklanmadan önce bir visible etkinliğiyle birlikte bu yöntemi kullanmayı düşünün. Bu yöntemin görünür olmayan bir bilgi penceresinde çağrılmasının herhangi bir etkisi olmaz. Bilgi penceresini görünür hale getirmek için open() numaralı telefonu arayın.

Bilgi penceresini kapatma

Varsayılan olarak, kullanıcı kapatma kontrolünü (bilgi penceresinin sağ üst tarafındaki bir çizgi) tıklayana veya ESC tuşuna basana kadar bilgi penceresi açık kalır. Bilgi penceresini close() yöntemini çağırarak da açıkça kapatabilirsiniz.

Bir bilgi penceresi kapatıldığında odak, bilgi penceresi açılmadan önce odaklanılan öğeye geri taşınır. Bu öğe kullanılamıyorsa odak tekrar haritaya taşınır. Bu davranışı geçersiz kılmak için closeclick etkinliğini dinleyebilir ve aşağıdaki örnekte gösterildiği gibi odağı manuel olarak yönetebilirsiniz:

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

Bilgi penceresini taşıma

Bilgi penceresinin konumunu değiştirmenin birkaç yolu vardır:

  • Bilgi penceresinden setPosition() numaralı telefonu arayın veya
  • Bilgi yöntemini, InfoWindow.open() yöntemini kullanarak yeni bir işaretçiye ekleyin. Not: İşaretçi iletmeden open() öğesini çağırırsanız InfoWindow, yapım sırasında belirtilen konumu InfoWindowOptions nesne değişmez değeri aracılığıyla kullanır.

Özelleştirme

InfoWindow sınıfı özelleştirme olanağı sunmaz. Bunun yerine, tamamen özelleştirilmiş bir pop-up'ın nasıl oluşturulacağını görmek için özelleştirilmiş pop-up örneği bölümüne bakın.