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 fazlası için seçenekler içerir
birçok seçenek var. Aşağıdaki snippet'te yeni bir PinElement
oluşturmak için kullanılacak kod gösterilmektedir.
bir işaretçiye uygulayın.
// 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çiye ilişkin temel parametreler
gmp-advanced-marker
HTML öğesi;
PinElement
sınıfının programatik olarak uygulanması gerekiyor. Bunu yapmak için kodunuz:
gmp-advanced-marker
öğelerini HTML sayfasından alma. Aşağıdakiler
snippet, gmp-advanced-marker
öğe koleksiyonunu sorgulayacak kodu gösterir,
daha sonra,
PinElement
.
// 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
- Glifte metin kullanma
- Simgeyi gizleme
Başlık metni ekleme
Başlık metni, imleç bir işaretçinin üzerine geldiğinde görünür. Başlık metni okunabiliyor okuyuculardan yardım alabilirsiniz.
Programatik olarak başlık metni eklemek için AdvancedMarkerElement.title
kullanın
seçenek:
// 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
İş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
Bir görselin kenarlık rengini değiştirmek için PinElement.borderColor
seçeneğini kullanın.
işaretçi:
TypeScript
// Change the border color. const pinBorder = new PinElement({ borderColor: '#137333', }); const markerViewBorder = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.035 }, 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.035 }, content: pinBorder.element, });
Glif rengini değiştirin
İşaretçinin simge 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.025 }, 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.025 }, content: pinGlyph.element, });
Bir glife metin ekleme
Varsayılan glifi metin karakteriyle değiştirmek için PinElement.glyph
seçeneğini kullanın. PinElement
içindeki metin glifi, PinElement
ve
varsayılan rengi, PinElement
öğesinin varsayılan glyphColor
rengiyle eşleşiyor.
TypeScript
const pinTextGlyph = new PinElement({ glyph: 'T', glyphColor: 'white', }); const markerViewGlyphText = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.015 }, content: pinTextGlyph.element, });
JavaScript
const pinTextGlyph = new PinElement({ glyph: "T", glyphColor: "white", }); const markerViewGlyphText = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.015 }, content: pinTextGlyph.element, });
Karakteri gizle
İşaretçinin simgesini gizlemek için PinElement.glyph
seçeneğini boş bir dize olarak ayarlayın:
TypeScript
// Hide the glyph. const pinNoGlyph = new PinElement({ glyph: '', }); const markerViewNoGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.005 }, content: pinNoGlyph.element, });
JavaScript
// Hide the glyph. const pinNoGlyph = new PinElement({ glyph: "", }); const markerViewNoGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.005 }, content: pinNoGlyph.element, });
Alternatif olarak, PinElement.glyphColor
öğesini PinElement.background
ile aynı değere ayarlayın.
Bu, glifi görsel olarak gizleme etkisine sahiptir.