Bilgi Pencereleri

1. Giriş
2. Bilgi penceresi ekleme
3. Bilgi penceresi açma
4. Bilgi penceresini kapatma
5. Bilgi penceresini taşıma

Giriş

InfoWindow, içeriği (genellikle metin veya resim) ilgili konumda gösterilen pop-up penceresine görünür. Bilgi penceresinde içerik var ve konik bir gövde. Sapın ucunun belirtilen bir ucuna bağlı konumlandırıyorsunuz. Bilgi pencereleri, ekran okuyuculara iletişim kutusu olarak görünür.

Tipik olarak bir işaretçi, ancak isterseniz aşağıdaki örnekte açıklandığı gibi, belirli bir enlem/boylama bir bilgi penceresi ekleyin bilgi penceresi eklemeyle ilgili bölümü aşağıda bulabilirsiniz.

Genel anlamda, bilgi pencereleri bir tür yer paylaşımıdır. Daha fazla bilgi için diğer türler için bkz. Haritada çizim.

Bilgi penceresi ekleyin

InfoWindow oluşturucusu, InfoWindowOptions nesne değişmez değeri (başlangıç öğesini belirtir) parametreleri alır.

InfoWindowOptions nesnesi değişmez değeri şu alanları içerir:

• content, bir metin dizesi veya DOM düğümü içeriyor tıklayın.
• pixelOffset, bilginin ucundan uzaklık içeriyor pencerenin sabit olduğu konuma işaret eder. Pratikte, bu alanı belirtmeniz gerekmez. Varsayılan değeri değiştirmeden bırakabilirsiniz değer.
• position, bu bilginin yer aldığı LatLng öğesini içeriyor sabitlendiğinden emin olun. Not: InfoWindow, şunlardan biri eklenebilir: bir Marker nesnesine (bu durumda, konumu işaretçinin konumu) veya haritada belirtilen bir LatLng üzerinde görüntüleyin. LatLng almanın bir yolu Coğrafi kodlama hizmeti. Bir işaretçi üzerinde bilgi penceresi açtığınızda, position
• maxWidth, bilgilerin maksimum genişliğini belirtir piksel cinsinden belirtin. Varsayılan olarak, bilgi penceresi içeriğine sığacak şekilde genişler. ve bilgi penceresi haritayı dolduruyorsa metni otomatik olarak kaydırır. Şu durumda: zorunlu kılmak için bilgi penceresinin otomatik olarak kaydırılacağı bir maxWidth ekleyin belirtilen genişlik. Maksimum genişliğe ulaşır ve dikey öğe varsa bilgi penceresi dikey olarak genişleyebilir.

InfoWindow öğesinin içeriği bir metin dizesi, veya DOM öğesi oluşturabilirsiniz. İçeriği ayarlamak için içeriği belirtin: InfoWindowOptions içinde veya sesli aramada InfoWindow üzerindeki setContent() açık bir şekilde belirtiliyor.

İçeriği belirgin bir şekilde boyutlandırmak isterseniz <div> öğesi seçin ve <div> öğesini CSS'ye dokunun. Kaydırmayı etkinleştirmek için CSS'yi de kullanabilirsiniz. Aksi takdirde kaydırmayı etkinleştirirseniz içerik, bilgideki mevcut alanı aşarsa içerik, bilgi penceresinden dışarı taşabilir.

Bir bilgi penceresi açın

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

• map, açılacak haritayı veya Street View panoramasını belirtir.
• anchor bir sabitleme noktası (örneğin, Marker) içeriyor. anchor seçeneği null ise veya tanımlanmamışsa bilgi penceresi, position mülkünde açılır.

// 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,
    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;
index.ts

// 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,
    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;
index.js

Aşağıdaki örnekte bir bilgi penceresinin maxWidth özelliği ayarlanmaktadır: örneği inceleyin.

Bilgi penceresine odaklanma

Bir bilgi penceresine odaklanmak için focus() işlevini çağırın yöntemidir. Bu yöntemi bir visible ile birlikte kullanabilirsiniz. etkinliği ön plana çıkarırız. Görünmeyen bir bilgide bu yöntemi çağırma herhangi bir etkisi olmaz. Şu numara için open() numaralı telefonu arayın: bir bilgi penceresini görünür hale getirmelisiniz.

Bilgi penceresini kapatma

Varsayılan olarak, kullanıcı kapat düğmesini tıklayana kadar bilgi penceresi açık kalır Ctrl (bilgi penceresinin sağ üst köşesindeki bir çarpı) işareti) veya ESC tuşuna basar. Ayrıca, close() adını çağırarak bilgi penceresini açıkça kapatabilirsiniz. yöntemidir.

Bilgi penceresi kapatıldığında odak, sayfada bulunan öğeye açılmadan önce odaklanmayı deneyin. Bu öğe mevcut değilse odak haritaya geri taşınır. Bu davranışı geçersiz kılmak için şunları dinleyebilirsiniz: closeclick etkinliğini tıklayın ve odağı şu örneği inceleyin:

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

Bilgi penceresini taşıma

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

• Bilgi penceresinden setPosition() adlı kişiyi arayın veya
• Bilgi penceresini yeni bir işaretçiye eklemek için InfoWindow.open() yöntemini çağırın. Not: open() adlı kişiyi ararsanız bir işaretçiyi geçirmeden, InfoWindow konumu kullanır yapım sonrası InfoWindowOptions nesne değişmez değeri.

Özelleştirme

InfoWindow sınıfı özelleştirme imkanı sunmaz. Bunun yerine bkz. özelleştirilmiş pop-up örneği tamamen özelleştirilmiş bir pop-up'ı nasıl oluşturacağınızı öğrenin.