- Giriş
- Bilgi penceresi ekleme
- Bilgi penceresi açma
- Bilgi penceresini kapatma
- Bilgi penceresini taşıma
Giriş
InfoWindow
, belirli bir konumda, haritanın
üst kısmındaki bir pop-up pencerede içeriği (genellikle metin veya resim) görüntüler. Bilgi penceresinde, içerik alanı ve eğimli bir gövde bulunur. Dalın ucu haritada belirli bir konuma iliştirilir. Bilgi pencereleri, ekran okuyuculara iletişim kutusu olarak görünür.
Tipik olarak bir işaretçiye bir bilgi penceresi eklersiniz ancak aşağıdaki bilgi penceresi ekleme bölümünde açıklandığı gibi, belirli bir enlem/boylama bilgi penceresi de ekleyebilirsiniz.
Genel olarak, bilgi pencereleri bir tür yer paylaşımıdır. Diğer bindirme türleri hakkında bilgi için Harita üzerinde çizim konusuna bakın.
Bilgi penceresi ekleme
InfoWindow
oluşturucu, bilgi penceresini görüntülemek için gereken başlangıç parametrelerini belirten
InfoWindowOptions
nesne değişmez değerini alır.
InfoWindowOptions
nesnesi değişmez değeri aşağıdaki alanları içerir:
content
, bilgi penceresinde görüntülenecek bir metin dizesi veya DOM düğümü içerir.pixelOffset
, bilgi penceresinin ucundan bilgi penceresinin sabitlendiği konuma bir ofset içerir. Pratikte bu alanı belirtmeniz gerekmez. Bu alanı varsayılan değerinde bırakabilirsiniz.position
, bu bilgi penceresinin sabitlendiğiLatLng
öğesini içerir. Not:InfoWindow
, birMarker
nesnesine (konum, işaretçinin konumuna bağlıdır) veya belirli birLatLng
için haritaya eklenebilir.LatLng
bilgilerini almanın bir yolu da Coğrafi Kodlama hizmetini kullanmaktır. Bir işaretçi üzerinde bir bilgi penceresi açıldığındaposition
otomatik olarak güncellenir.maxWidth
, bilgi penceresinin maksimum genişliğini piksel cinsinden belirtir. Varsayılan olarak, bir bilgi penceresi içeriğine sığacak şekilde genişler ve bilgi penceresi haritayı doldurduğunda metni otomatik olarak kaydırır. BirmaxWidth
eklerseniz bilgi penceresi, belirtilen genişliği zorunlu kılmak için otomatik olarak sarmalanır. Maksimum genişliğe ulaşırsa ve ekranda dikey bir alan varsa bilgi penceresi dikey olarak genişleyebilir.
InfoWindow
öğesinin içeriği bir metin dizesi, HTML snippet'i veya bir DOM öğesi içerebilir. İçeriği ayarlamak için InfoWindowOptions
içinde belirtin veya InfoWindow
öğesinde setContent()
işlevini açıkça çağırın.
İçeriği açıkça boyutlandırmak isterseniz <div>
öğesine yerleştirebilir ve <div>
öğesini CSS ile biçimlendirebilirsiniz. Kaydırmayı etkinleştirmek için CSS'yi de kullanabilirsiniz. Kaydırma özelliğini
etkinleştirmezseniz ve içerik, bilgi penceresindeki alanı aşarsa
içerik bilgi penceresinin dışına taşabilir.
Bilgi penceresi açma
Bir bilgi penceresi oluşturduğunuzda, bu pencere haritada otomatik olarak gösterilmez.
Bilgi penceresini görünür hale getirmek için InfoWindow
üzerinde open()
yöntemini çağırarak aşağıdaki seçenekleri belirten bir InfoWindowOpenOptions
nesne değişmez değerini iletmeniz gerekir:
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 penceresiposition
özelliğinde 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 örnek, bir bilgi penceresinin maxWidth
özelliğini ayarlar:
örneği göster.
Bir bilgi penceresine odaklanmayı ayarlama
Odağı bir bilgi penceresine ayarlamak için focus()
yöntemini çağırın. Odağı belirlemeden önce bu yöntemi bir visible
etkinliğiyle birlikte kullanmanız önerilir. 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, bir bilgi penceresi kullanıcı kapatma denetimini (bilgi penceresinin sağ üst köşesindeki artı işareti) tıklayana veya ESC tuşuna basana kadar açık kalır.
Bilgi penceresini, close()
yöntemini çağırarak açıkça kapatabilirsiniz.
Bir bilgi penceresi kapatıldığında odak, bilgi penceresi açılmadan önce odakta olan öğeye geri döner. Bu öğe kullanılamıyorsa odak tekrar haritaya taşınır. Bu davranışı geçersiz kılmak için closeclick
etkinliğini dinleyebilir ve odağı aşağıdaki örnekte gösterildiği gibi manuel olarak yönetebilirsiniz:
infoWindow.addListener('closeclick', ()=>{ // Handle focus manually. });
Bilgi penceresini taşıma
Bir bilgi penceresinin konumunu değiştirmenin iki yolu vardır:
- Bilgi penceresinden
setPosition()
numaralı telefonu arayın veya InfoWindow.open()
yöntemini kullanarak bilgi penceresini yeni bir işaretçiye ekleyin. Not:open()
öğesini işaretçi geçirmeden çağırırsanızInfoWindow
, oluşturma sırasındaInfoWindowOptions
nesne değişmez değeri ile belirtilen konumu kullanır.
Özelleştirme
InfoWindow
sınıfı özelleştirme sunmaz. Bunun yerine, tamamen özelleştirilmiş bir pop-up'ın nasıl oluşturulacağını görmek için özelleştirilmiş pop-up örneğine bakın.