Für die Definition von erweiterten Markierungen werden zwei Klassen verwendet: AdvancedMarkerElement
bietet die grundlegenden Parameter (position
, title
und map
), PinElement
Optionen zur weiteren Anpassung. Mit dem Code im folgenden Snippet wird ein neues PinElement
erstellt und dann auf eine Markierung angewendet.
// 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,
});
In Karten, die mithilfe von HTML erstellt werden, werden die grundlegenden Parameter einer Markierung mit dem HTML-Element gmp-advanced-marker
deklariert. Eventuelle Anpassungen, für die die PinElement
-Klasse verwendet wird, müssen programmatisch angewendet werden. Hierzu müssen die gmp-advanced-marker
-Elemente per Code von der HTML-Seite abgerufen werden. Mit dem Code im folgenden Snippet wird eine Sammlung von gmp-advanced-marker
-Elementen abgefragt und dann werden die Ergebnisse iteriert, um eine Anpassung anzuwenden, die im PinElement
deklariert wurde.
// 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);
}
Auf dieser Seite wird beschrieben, wie Sie folgende Anpassungen an Markierungen vornehmen:
- Titeltext hinzufügen
- Größe der Markierung anpassen
- Hintergrundfarbe ändern
- Rahmenfarbe ändern
- Farbe des Symbols ändern
- Symbol ausblenden
![Ein Diagramm, das die Komponenten einer erweiterten Markierung zeigt](https://cdn.statically.io/img/developers.google.com/static/maps/documentation/javascript/advanced-markers/images/marker_parts.png?hl=de)
Titeltext hinzufügen
Der Titeltext wird eingeblendet, wenn der Cursor auf eine Markierung bewegt wird. Er kann von Screenreadern gelesen werden.
Um Titeltext programmatisch hinzuzufügen, verwenden Sie die Option AdvancedMarkerElement.title
:
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",
});
Um einer mithilfe von HTML erstellten Markierung Titeltext hinzuzufügen, verwenden Sie das Attribut 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>
Größe der Markierung anpassen
Um die Größe einer Markierung anzupassen, verwenden Sie die Option 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,
});
Hintergrundfarbe ändern
Mit der Option PinElement.background
können Sie die Hintergrundfarbe einer Markierung ändern:
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,
});
Rahmenfarbe ändern
Mit der Option PinElement.borderColor
können Sie die Rahmenfarbe einer Markierung ändern:
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,
});
Farbe des Symbols ändern
Mit der Option PinElement.glyphColor
können Sie die Farbe des Symbols einer Markierung ändern:
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,
});
Symbol ausblenden
Sie können die Option PinElement.glyph
auf einen leeren String setzen, um das Symbol für eine Markierung auszublenden:
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,
});
Alternativ können Sie PinElement.glyphColor
auf denselben Wert wie PinElement.background
festlegen.
Dadurch wird das Symbol unsichtbar.
Nächste Schritte