- Giriş
- Bilgi penceresi ekleme
- Bilgi penceresi açma
- Bilgi penceresini kapatma
- 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.
![Avustralya'daki bir konumla ilgili bilgileri gösteren Bilgi Penceresi.](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/documentation/javascript/images/info-window.png?authuser=6&hl=tr)
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.
ekleyin.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: birMarker
nesnesine (bu durumda, konumu işaretçinin konumu) veya haritada belirtilen birLatLng
ü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ğı birmaxWidth
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ğinull
ise veya tanımlanmamışsa bilgi penceresi,position
mülkünde açılır.
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 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.</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;.
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 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.</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;.
Örneği Deneyin
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.