Einfache Anpassung von Markierungen

In der Markers API für 3D-Karten werden zwei Klassen verwendet, um Markierungen zu definieren: Die Klasse 3DMarkerElement bietet die grundlegenden Parameter (position, label und map). Die Klasse PinElement enthält 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.

Mit dem Code im folgenden Snippet wird ein neues PinElement erstellt und dann auf eine Markierung angewendet:

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerWithScale = new Marker3DElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerWithScale.append(pinScaled);

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 Klasse PinElement 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

Um die Größe einer Markierung anzupassen, verwenden Sie die Option scale:

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerWithScale = new Marker3DElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerWithScale.append(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 markerWithBackground = new Marker3DElement({
    position: { lat: 37.419, lng: -122.01 },
});
markerWithBackground.append(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: '#FFFFFF',
});
const markerWithBorder = new Marker3DElement({
    position: { lat: 37.415, lng: -122.035 },
});
markerWithBorder.append(pinBorder);

Farbe der Glyphe ändern

Mit der Option PinElement.glyphColor können Sie die Glyphenfarbe einer Markierung ändern:

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerWithGlyphColor = new Marker3DElement({
    position: { lat: 37.415, lng: -122.025 },
});
markerWithGlyphColor.append(pinGlyph);

Text zu einer Glyphe hinzufügen

Mit der Option PinElement.glyph können Sie die Standardglyphe durch ein Textzeichen ersetzen. Das Textsymbol des PinElement wird mit dem PinElement skaliert und die Standardfarbe entspricht der Standardfarbe glyphColor des PinElement:

// Change many elements together and extrude marker.
const pinTextGlyph = new PinElement({
    background: '#F0F6FC',
    glyphText: 'E',
    glyphColor: 'red',
    borderColor: '#0000FF',
});
const markerWithGlyphText = new Marker3DElement({
    position: { lat: 37.415, lng: -122.015, altitude: 50 },
    extruded: true,
    altitudeMode: 'RELATIVE_TO_GROUND',
});
markerWithGlyphText.append(pinTextGlyph);

Höhe ändern

Mit der Option Marker3DElement.position.altitude in Kombination mit Marker3DElement.altitudeMode und Marker3DElement.extruded können Sie die Höhe der Markierung ändern und eine extrudierte Linie zwischen dem Boden und der Markierung hinzufügen:

// Change a marker's altitude and add an extrusion.
const extrudedMarker = 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();

Nächste Schritte