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
), PinElement
sınıfı ise daha fazla özelleştirme seçeneği içerir. Aşağıdaki snippet'te yeni bir PinElement
oluşturmak için kullanılacak kod gösterilmektedir,
ardından bir işaretçiye uygulanır.
// 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 bildirilir; 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
öğesi koleksiyonunu sorgulamak için kodu göstermektedir. Daha sonra PinElement
içinde açıklanan özelleştirmeyi uygulamak için sonuçları tekrarlamanızı sağlar.
// 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çileri aşağıdaki şekillerde nasıl özelleştireceğiniz 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
![Gelişmiş işaretçinin bölümlerini gösteren bir diyagram.](https://developers.google.cn/static/maps/documentation/javascript/advanced-markers/images/marker_parts.png?authuser=0&hl=tr)
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.
Programatik olarak başlık metni 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şturulan 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
Bir iş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
Bir iş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ştirin
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,
});
Karakteri gizle
İş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, glifin görsel olarak gizlenmesi etkisine sahiptir.
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-06-20 UTC.
[]
[]