Für die Definition von 3D-Markierungen werden zwei Klassen verwendet: 3DMarkerElement
bietet die grundlegenden Parameter (position
, label
und map
), PinElement
Optionen zur weiteren Anpassung.
Wenn Sie einer Karte Markierungen hinzufügen möchten, müssen Sie zuerst die Markierungsbibliothek laden, die die Klassen 3DMarkerElement
und PinElement
enthält.
Im folgenden Snippet wird Code zum Erstellen eines neuen PinElement
und zum Anwenden auf eine Markierung gezeigt:
const pinScaled = new PinElement({
scale: 1.5,
});
const markerWithLabel = new Marker3DElement({
position: { lat: 37.419, lng: -122.03 },
label: 'Simple label'
});
In Karten, die mithilfe von HTML erstellt werden, werden die grundlegenden Parameter einer Markierung mit dem HTML-Element gmp-marker-3d
deklariert. Eventuelle Anpassungen, für die die PinElement
-Klasse verwendet wird, müssen programmatisch angewendet werden. Hierzu müssen die gmp-marker-3d
-Elemente per Code von der HTML-Seite abgerufen werden. Mit dem Code im folgenden Snippet wird eine Sammlung von gmp-marker-3d
-Elementen abgefragt und dann werden die Ergebnisse iteriert, um eine Anpassung anzuwenden, die im gmp-marker-3d deklariert wurde.
// Return an array of markers.
const markers = [...document.querySelectorAll('gmp-marker-3d')];
// Loop through the markers
for (let i = 0; i < markers.length; i++) {
const pin = new PinElement({
scale: 2.0,
});
markers[i].appendChild(pin.element);
}
Auf dieser Seite wird beschrieben, wie Sie folgende Anpassungen an Markierungen vornehmen:
- Größe der Markierung anpassen
- Hintergrundfarbe ändern
- Rahmenfarbe ändern
- Farbe des Symbols ändern
- Symbolen Text hinzufügen
- Höhe ändern
- Markierungen entfernen
Größe der Markierung anpassen
Um die Größe einer Markierung anzupassen, verwenden Sie die Option scale
:
// Adjust the scale.
const pinScaled = new PinElement({
scale: 1.5,
});
const markerScaled = new Marker3DElement({
map,
position: { lat: 37.419, lng: -122.02 },
});
markerScaled.appendChild(pinScaled);
Hintergrundfarbe ändern
Mit der Option PinElement.background
können Sie die Hintergrundfarbe einer Markierung ändern:
// Change the background color.
const pinBackground = new PinElement({
background: '#FBBC04',
});
const markerBackground = new Marker3DElement({
map,
position: { lat: 37.419, lng: -122.01 },
});
markerBackground.appendChild(pinBackground);
Rahmenfarbe ändern
Mit der Option PinElement.borderColor
können Sie die Rahmenfarbe einer Markierung ändern:
// Change the border color.
const pinBorder = new PinElement({
borderColor: "#137333",
});
const markerBorder = new Marker3DElement({
map,
position: { lat: 37.415, lng: -122.035 },
});
markerBorder.appendChild(pinBorder);
Farbe des Symbols ändern
Mit der Option PinElement.glyphColor
können Sie die Farbe des Symbols einer Markierung ändern:
// Change the glyph color.
const pinGlyph = new PinElement({
glyphColor: "white",
});
const markerGlyph = new Marker3DElement({
map,
position: { lat: 37.415, lng: -122.025 },
});
markerGlyph.appendChild(pinGlyph);
Glyphen Text hinzufügen
Mit der Option PinElement.glyph
können Sie das Standardsymbol durch ein Textzeichen ersetzen. Das Textsymbol des PinElement
skaliert mit dem PinElement
und seine Standardfarbe entspricht der StandardglyphColor
des PinElements:
const pinTextGlyph = new PinElement({
glyph: "T",
glyphColor: "white",
});
const markerGlyphText = new Marker3DElement({
map,
position: { lat: 37.415, lng: -122.015 },
});
markerGlyphText.appendChild(pinTextGlyph);
Höhe ändern
Verwenden Sie die Option Marker3DElement.position.altitude
in Kombination mit Marker3DElement.altitudeMode
und Marker3DElement.extruded
, um die Höhe der Markierung zu ändern und eine extrudierte Linie zwischen dem Boden und der Markierung hinzuzufügen:
const marker = new Marker3DElement({
position: { lat: 37.4239163, lng: -122.0947209, altitude: 100 },
altitudeMode: 'RELATIVE_TO_GROUND',
extruded: true,
});
Markierungen entfernen
Mit Marker3DElement.remove()
können Sie Markierungen von der Karte entfernen:
const marker = document.querySelector('gmp-marker-3d');
marker.remove();