Gelişmiş işaretçiler, işaretçileri tanımlamak için iki sınıf kullanır: AdvancedMarkerElement
sınıfı temel parametreleri (position
, title
ve map
) ve PinElement
sınıfı daha fazla özelleştirme için seçenekler içerir. Aşağıdaki snippet'te yeni bir PinElement
oluşturmak ve bu kodu işaretçiye uygulamak için gereken kod gösterilmektedir.
// Create a pin element.
const pin = new PinElement({
scale: 1.5,
});
// Create a marker and apply the element.
const marker = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.02 },
content: pin.element,
});
HTML kullanılarak oluşturulan haritalarda, bir işaretçinin temel parametreleri gmp-advanced-marker
HTML öğesi kullanılarak tanımlanır; PinElement
sınıfını kullanan tüm özelleştirmeler programatik olarak uygulanmalıdır. Bunu yapmak için kodunuzun HTML sayfasından gmp-advanced-marker
öğelerini alması gerekir. Aşağıdaki snippet, gmp-advanced-marker
öğelerinden oluşan bir koleksiyon için sorgulama yapmak üzere kodu göstermektedir; daha sonra PinElement
içinde tanımlanan özelleştirmeyi uygulamak için sonuçları yinelemektedir.
// Return an array of markers.
const advancedMarkers = [...document.querySelectorAll('gmp-advanced-marker')];
// Loop through the markers
for (let i = 0; i < advancedMarkers.length; i++) {
const pin = new PinElement({
scale: 2.0,
});
marker.appendChild(pin.element);
}
Bu sayfada, işaretçilerin aşağıdaki şekillerde nasıl özelleştirileceği gösterilmektedir:
- Başlık metni ekleme
- İşaretçiyi ölçeklendirme
- Arka plan rengini değiştirme
- Kenarlık rengini değiştirme
- Glif rengini değiştirme
- Glifi gizleme
Başlık metni ekleyin
Başlık metni, imleç bir işaretçinin üzerine geldiğinde görünür. Başlık metni, ekran okuyucular tarafından okunabilir.
Başlık metnini programatik olarak eklemek için AdvancedMarkerElement.title
seçeneğini kullanın:
TypeScript
// Default marker with title text (no PinElement).
const markerViewWithText = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.03 },
title: 'Title text for the marker at lat: 37.419, lng: -122.03',
});
JavaScript
// Default marker with title text (no PinElement).
const markerViewWithText = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.03 },
title: "Title text for the marker at lat: 37.419, lng: -122.03",
});
HTML kullanılarak oluşturulmuş bir işaretçiye başlık metni eklemek için title
özelliğini kullanın:
<gmp-map
center="43.4142989,-124.2301242"
zoom="4"
map-id="DEMO_MAP_ID"
style="height: 400px"
>
<gmp-advanced-marker
position="37.4220656,-122.0840897"
title="Mountain View, CA"
></gmp-advanced-marker>
<gmp-advanced-marker
position="47.648994,-122.3503845"
title="Seattle, WA"
></gmp-advanced-marker>
</gmp-map>
İşaretçiyi ölçeklendirin
Bir işaretçiyi ölçeklendirmek için scale
seçeneğini kullanın.
TypeScript
// Adjust the scale.
const pinScaled = new PinElement({
scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.02 },
content: pinScaled.element,
});
JavaScript
// Adjust the scale.
const pinScaled = new PinElement({
scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.02 },
content: pinScaled.element,
});
Arka plan rengini değiştirme
İşaretçinin arka plan rengini değiştirmek için PinElement.background
seçeneğini kullanın:
TypeScript
// Change the background color.
const pinBackground = new PinElement({
background: '#FBBC04',
});
const markerViewBackground = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.01 },
content: pinBackground.element,
});
JavaScript
// Change the background color.
const pinBackground = new PinElement({
background: "#FBBC04",
});
const markerViewBackground = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.01 },
content: pinBackground.element,
});
Kenarlık rengini değiştirme
İşaretçinin kenarlık rengini değiştirmek için PinElement.borderColor
seçeneğini kullanın:
TypeScript
// Change the border color.
const pinBorder = new PinElement({
borderColor: '#137333',
});
const markerViewBorder = new AdvancedMarkerElement({
map,
position: { lat: 37.415, lng: -122.03 },
content: pinBorder.element,
});
JavaScript
// Change the border color.
const pinBorder = new PinElement({
borderColor: "#137333",
});
const markerViewBorder = new AdvancedMarkerElement({
map,
position: { lat: 37.415, lng: -122.03 },
content: pinBorder.element,
});
Glif rengini değiştirme
Bir işaretçinin glif rengini değiştirmek için PinElement.glyphColor
seçeneğini kullanın:
TypeScript
// Change the glyph color.
const pinGlyph = new PinElement({
glyphColor: 'white',
});
const markerViewGlyph = new AdvancedMarkerElement({
map,
position: { lat: 37.415, lng: -122.02 },
content: pinGlyph.element,
});
JavaScript
// Change the glyph color.
const pinGlyph = new PinElement({
glyphColor: "white",
});
const markerViewGlyph = new AdvancedMarkerElement({
map,
position: { lat: 37.415, lng: -122.02 },
content: pinGlyph.element,
});
Glifi gizle
Bir işaretçinin glifini gizlemek için PinElement.glyph
seçeneğini boş bir dizeye ayarlayın:
TypeScript
// Hide the glyph.
const pinNoGlyph = new PinElement({
glyph: '',
});
const markerViewNoGlyph = new AdvancedMarkerElement({
map,
position: { lat: 37.415, lng: -122.01 },
content: pinNoGlyph.element,
});
JavaScript
// Hide the glyph.
const pinNoGlyph = new PinElement({
glyph: "",
});
const markerViewNoGlyph = new AdvancedMarkerElement({
map,
position: { lat: 37.415, lng: -122.01 },
content: pinNoGlyph.element,
});
Alternatif olarak, PinElement.glyphColor
öğesini PinElement.background
ile aynı değere ayarlayın.
Bu durumda glif görsel olarak gizlenir.
Sonraki adımlar:
Aksi belirtilmediği sürece bu sayfanın içeriği Creative Commons Atıf 4.0 Lisansı altında ve kod örnekleri Apache 2.0 Lisansı altında lisanslanmıştır. Ayrıntılı bilgi için Google Developers Site Politikaları'na göz atın. Java, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2024-05-14 UTC.
[]
[]