Zaawansowane znaczniki używają dwóch klas:
Klasa AdvancedMarkerElement
udostępnia podstawowe parametry (position
,
title
i map
), a klasa PinElement
zawiera opcje pozwalające przejść dalej
i personalizacji reklam. Ten fragment kodu zawiera kod do utworzenia nowego elementu PinElement
:
a następnie zastosować go do znacznika.
// 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,
});
W mapach utworzonych przy użyciu kodu HTML podstawowe parametry znacznika są deklarowane za pomocą
element HTML gmp-advanced-marker
; wszelkie dostosowania korzystające z
Klasa PinElement
musi być stosowana automatycznie. W tym celu należy użyć kodu
pobierze elementy gmp-advanced-marker
ze strony HTML. Poniżej
fragment kodu zawiera kod zapytania o zbiór elementów gmp-advanced-marker
,
i powtarzaj wyniki, aby zastosować dostosowanie zadeklarowane w
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);
}
Na tej stronie znajdziesz następujące informacje na temat dostosowywania znaczników:
- Dodawanie tekstu tytułu
- Skalowanie znacznika
- Zmienianie koloru tła
- Zmiana koloru obramowania
- Zmienianie koloru glifu
- Ukrywanie glifu
![Schemat przedstawiający elementy znacznika zaawansowanego.](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/documentation/javascript/advanced-markers/images/marker_parts.png?authuser=19&hl=pl)
Dodaj tekst tytułu
Tekst tytułu pojawia się po najechaniu kursorem na znacznik. Tytuł jest czytelny za pomocą czytników ekranu.
Aby automatycznie dodać tekst tytułu, użyj komponentu AdvancedMarkerElement.title
opcja:
// 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", });
Aby dodać tekst tytułu do znacznika utworzonego za pomocą kodu HTML, użyj atrybutu title
:
<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>
Skaluj znacznik
Aby skalować znacznik, użyj opcji scale
.
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, });
Zmienianie koloru tła
Aby zmienić kolor tła znacznika, użyj opcji PinElement.background
:
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, });
Zmiana koloru obramowania
Użyj opcji PinElement.borderColor
, aby zmienić kolor obramowania
znacznik:
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, });
Zmienianie koloru glifu
Aby zmienić kolor glifu znacznika, użyj opcji PinElement.glyphColor
:
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, });
Ukryj glif
Aby ukryć glif znacznika, ustaw opcję PinElement.glyph
na pusty ciąg:
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, });
Możesz też ustawić PinElement.glyphColor
na tę samą wartość co PinElement.background
.
W efekcie glif jest ukrywany wizualnie.