Advanced Markers

AdvancedMarkerElement sınıfı

google.maps.marker.AdvancedMarkerElement class
extends HTMLElement
implements AdvancedMarkerElementOptions
library "marker"

Haritada bir konumu gösterir. AdvancedMarkerElement değerinin gösterilmesi için position değerinin ayarlanması gerektiğini unutmayın.

   
<gmp-advanced-marker
  anchor-left="string"
  anchor-top="string"
  gmp-clickable
  position="lat,lng"
  title="string">
</gmp-advanced-marker>
 
const {AdvancedMarkerElement} = await google.maps.importLibrary("marker");
AdvancedMarkerElement
AdvancedMarkerElement([options])
Parametreler:
Belirtilen seçeneklerle bir AdvancedMarkerElement oluşturur. Bir harita belirtilirse AdvancedMarkerElement, oluşturulduktan sonra haritaya eklenir.
anchorLeft
attr: anchor-left
Tür: string optional
Varsayılan: "-%50"
İşaretçinin bağlantı noktasını işaretçinin sol üst köşesinden kaydırmak için kullanılan bir CSS uzunluk yüzdesi değeri. Bu, varsayılan işaretçinin tipik alt orta noktasından farklı bir sabitleme noktasına sahip bir görsel kullanırken yararlıdır.
HTML özelliği: anchor-left="string"
anchorTop
attr: anchor-top
Tür: string optional
Varsayılan: "-%100"
İşaretçinin bağlantı noktasını işaretçinin sol üst köşesinden kaydırmak için kullanılan bir CSS uzunluk yüzdesi değeri. Bu, varsayılan işaretçinin tipik alt orta noktasından farklı bir sabitleme noktasına sahip bir görsel kullanırken yararlıdır.
HTML özelliği: anchor-top="string"
collisionBehavior
Tür: CollisionBehavior optional
Şu sayfaya göz atın: AdvancedMarkerElementOptions.collisionBehavior.
gmpClickable
attr: gmp-clickable
Tür: boolean optional
Şu sayfaya göz atın: AdvancedMarkerElementOptions.gmpClickable.
HTML özelliği: gmp-clickable
gmpDraggable
Tür: boolean optional
Şu sayfaya göz atın: AdvancedMarkerElementOptions.gmpDraggable.
map
Tür: Map optional
Şu sayfaya göz atın: AdvancedMarkerElementOptions.map.
position
attr: position
Şu sayfaya göz atın: AdvancedMarkerElementOptions.position.
HTML özelliği:
  • position="lat,lng"
  • position="lat,lng,altitude"
title
attr: title
Tür: string
Şu sayfaya göz atın: AdvancedMarkerElementOptions.title.
HTML özelliği: title="string"
zIndex
Tür: number optional
Şu sayfaya göz atın: AdvancedMarkerElementOptions.zIndex.
element
readonly
Bu alan salt okunurdur. Görünümü destekleyen DOM öğesi.
content
Tür: Node optional
Şu sayfaya göz atın: AdvancedMarkerElementOptions.content.
addListener
addListener(eventName, handler)
Parametreler:
  • eventName: string Gözlemlenen etkinlik.
  • handler: Etkinlikleri işlemek için Function işlevi.
Döndürülen Değer: MapsEventListener Sonuçta elde edilen etkinlik işleyici.
Belirtilen işleyici işlevini, Haritalar Etkinlik sistemindeki belirtilen etkinlik adına ekler.
Devralınan: addEventListener, removeEventListener
click
function(event)
Bağımsız değişkenler:
Bu etkinlik, AdvancedMarkerElement öğesi tıklandığında tetiklenir.

addEventListener() ile kullanılamaz (bunun yerine gmp-click kullanın).
drag
function(event)
Bağımsız değişkenler:
Bu etkinlik, kullanıcı AdvancedMarkerElement öğesini sürüklerken tekrar tekrar tetiklenir.

addEventListener() ile kullanılamaz.
dragend
function(event)
Bağımsız değişkenler:
Bu etkinlik, kullanıcı AdvancedMarkerElement öğesini sürüklemeyi bıraktığında tetiklenir.

addEventListener() ile kullanılamaz.
dragstart
function(event)
Bağımsız değişkenler:
Bu etkinlik, kullanıcı AdvancedMarkerElement öğesini sürüklemeye başladığında tetiklenir.

addEventListener() ile kullanılamaz.
gmp-click
function(event)
Bağımsız değişkenler:
Bu etkinlik, AdvancedMarkerElement öğesi tıklandığında tetiklenir. addEventListener() ile kullanılması önerilir (addListener() yerine).

AdvancedMarkerElementOptions arayüzü

google.maps.marker.AdvancedMarkerElementOptions arayüz

AdvancedMarkerElement oluşturma seçenekleri.
anchorLeft
isteğe bağlı
Tür: string optional
Varsayılan: "-%50"
İşaretçinin bağlantı noktasını işaretçinin sol üst köşesinden kaydırmak için kullanılan bir CSS uzunluk yüzdesi değeri. Bu, varsayılan işaretçinin tipik alt orta noktasından farklı bir sabitleme noktasına sahip bir görsel kullanırken yararlıdır.
anchorTop
isteğe bağlı
Tür: string optional
Varsayılan: "-%100"
İşaretçinin bağlantı noktasını işaretçinin sol üst köşesinden kaydırmak için kullanılan bir CSS uzunluk yüzdesi değeri. Bu, varsayılan işaretçinin tipik alt orta noktasından farklı bir sabitleme noktasına sahip bir görsel kullanırken yararlıdır.
collisionBehavior
isteğe bağlı
Tür: CollisionBehavior optional
Bir AdvancedMarkerElement öğesinin başka bir AdvancedMarkerElement öğesiyle veya vektör haritadaki temel harita etiketleriyle çakıştığında nasıl davranması gerektiğini belirten bir sıralama.

Not: AdvancedMarkerElement ile AdvancedMarkerElement arasındaki çakışma hem raster hem de vektör haritalarda çalışır ancak AdvancedMarkerElement ile temel haritanın etiket çakışması yalnızca vektör haritalarda çalışır.
content
isteğe bağlı
Tür: Node optional
Varsayılan: PinElement
AdvancedMarkerElement görselini destekleyen DOM öğesi.

Not: AdvancedMarkerElement, iletilen DOM öğesini klonlamaz. DOM öğesi bir AdvancedMarkerElement öğesine iletildikten sonra aynı DOM öğesinin başka bir AdvancedMarkerElement öğesine iletilmesi, DOM öğesini taşır ve önceki AdvancedMarkerElement öğesinin boş görünmesine neden olur.
gmpClickable
isteğe bağlı
Tür: boolean optional
Varsayılan: false
true ise AdvancedMarkerElement tıklanabilir olur ve gmp-click etkinliğini tetikler.Ayrıca erişilebilirlik amacıyla etkileşimli olur (ör. ok tuşlarıyla klavye gezinmesine izin verir).
gmpDraggable
isteğe bağlı
Tür: boolean optional
Varsayılan: false
true ise AdvancedMarkerElement sürüklenebilir.

Not: Rakım içeren AdvancedMarkerElement sürüklenebilir değildir.
map
isteğe bağlı
Tür: Map optional
AdvancedMarkerElement öğesinin gösterileceği harita. Harita, AdvancedMarkerElement öğesini göstermek için gereklidir ve oluşturma sırasında sağlanmadıysa AdvancedMarkerElement.map ayarlanarak sağlanabilir.
position
isteğe bağlı
AdvancedMarkerElement öğesinin konumunu ayarlar. AdvancedMarkerElement, konum olmadan oluşturulabilir ancak konumu sağlanana kadar (ör. kullanıcının işlemleri veya seçimleri aracılığıyla) gösterilmez. AdvancedMarkerElement öğesinin konumu, oluşturma sırasında sağlanmadıysa AdvancedMarkerElement.position ayarlanarak sağlanabilir.

Not: Rakımlı AdvancedMarkerElement yalnızca vektör haritalarda desteklenir.
title
isteğe bağlı
Tür: string optional
Fareyle üzerine gelindiğinde gösterilen metin. Sağlanırsa AdvancedMarkerElement öğesine, sağlanan değerle birlikte bir erişilebilirlik metni (ör. ekran okuyucularla kullanım için) eklenir.
zIndex
isteğe bağlı
Tür: number optional
Tüm AdvancedMarkerElement öğeleri, haritada zIndex değerlerine göre sıralanır. Daha yüksek değerlere sahip öğeler, daha düşük değerlere sahip AdvancedMarkerElement öğelerinin önünde gösterilir. Varsayılan olarak AdvancedMarkerElement, ekrandaki dikey konumlarına göre gösterilir. Daha alçak AdvancedMarkerElement, ekranın daha yukarısındaki AdvancedMarkerElement öğelerinin önünde görünür. Açıkça belirtilmiş bir zIndex değeri olan işaretçilerle bu değerin belirtilmediği işaretçileri karıştırmak, beklenmedik görsel sonuçlara yol açabilir. Davranışın tahmin edilebilir olması için tüm işaretçilerde zIndex değerini ayarlamanız veya ayarlanmamış olarak bırakmanız önerilir. zIndex, CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY Gelişmiş İşaretçi arasındaki göreceli önceliği belirlemek için de kullanılır. Daha yüksek bir zIndex değeri, daha yüksek önceliği gösterir.

AdvancedMarkerClickEvent sınıfı

google.maps.marker.AdvancedMarkerClickEvent sınıfı
Event
kitaplığını "marker"genişletir

Bu etkinlik, gelişmiş işaretçinin tıklanmasıyla oluşturulur. event.target.position ile işaretçinin konumuna erişin.

const {AdvancedMarkerClickEvent} = await google.maps.importLibrary("marker");

PinElement sınıfı

google.maps.marker.PinElement class
extends HTMLElement
implements PinElementOptions
library "marker"

PinElement, bir şekil ve gliften oluşan DOM öğesini temsil eder. Şekil, varsayılan AdvancedMarkerElement veya Marker3DElement ile aynı balon stiline sahiptir. Glif, balon şeklinde gösterilen isteğe bağlı bir DOM öğesidir. PinElement, PinElement.scale değerine bağlı olarak farklı bir en boy oranına sahip olabilir.

const {PinElement} = await google.maps.importLibrary("marker");
PinElement
PinElement([options])
Parametreler:
background
Tür: string optional
Raptiye şeklinin arka plan rengi. Şu sayfaya göz atın: PinElementOptions.background.
borderColor
Tür: string optional
Raptiye şeklinin kenarlık rengi. Şu sayfaya göz atın: PinElementOptions.borderColor.
glyphColor
Tür: string optional
Raptiye glifinin rengi. Şu sayfaya göz atın: PinElementOptions.glyphColor.
glyphSrc
Tür: URL|string optional
Raptiyede gösterilecek glif resminin kaynağı. Şu sayfaya göz atın: PinElementOptions.glyphSrc.
glyphText
Tür: string optional
Raptiyede gösterilen metin. Şu sayfaya göz atın: PinElementOptions.glyphText.
scale
Tür: number optional
Şu sayfaya göz atın: PinElementOptions.scale.
element
readonly
Bu alan salt okunurdur. Görünümü destekleyen DOM öğesi.
glyph
Tür: string|Element|URL optional
Şu sayfaya göz atın: PinElementOptions.glyph.
Devralınan: addEventListener, removeEventListener

PinElementOptions arayüzü

google.maps.marker.PinElementOptions arayüz

PinElement oluşturma seçenekleri.
background
isteğe bağlı
Tür: string optional
Raptiye şeklinin arka plan rengi. Tüm CSS renk değerlerini destekler.
borderColor
isteğe bağlı
Tür: string optional
Raptiye şeklinin kenarlık rengi. Tüm CSS renk değerlerini destekler.
glyph
isteğe bağlı
Tür: string|Element|URL optional
Raptiyede gösterilen DOM öğesi.
glyphColor
isteğe bağlı
Tür: string optional
Glifin rengi. Tüm CSS renk değerlerini destekler.
glyphSrc
isteğe bağlı
Tür: URL|string optional
Raptiyede gösterilecek glif resminin kaynağı.
glyphText
isteğe bağlı
Tür: string optional
Raptiyede gösterilen metin.
scale
isteğe bağlı
Tür: number optional
Varsayılan: 1
Raptiyenin ölçeği.