Mit Markierungen können Sie die Aufmerksamkeit der Nutzer auf einen Ort auf einer Karte lenken. In dieser Anleitung wird gezeigt, wie Sie Markierungen in 3D-Karten verwenden und anpassen. Sie können die Form, Größe und Farbe von Markierungen sowie die Höhe, in der sie angezeigt werden, festlegen.
Mit Markierungen lassen sich Standorte auf Karten darstellen. Im obigen Beispiel sehen Sie eine einfache Markierung ohne Anpassungen.
Farbe, Größe und Symbolbild anpassen
Sie können Hintergrund, Glyphe, Rahmenfarbe und Größe der Standardmarkierung anpassen.
Ersetzen Sie das Standardmarkierungssymbol durch eine benutzerdefinierte SVG-Ressource.
Höhe der Markierung festlegen
Sie können die Höhe der Markierung festlegen, indem Sie sie extrudieren und die Höhe festlegen.
Markierungen auf Klick- und Tastaturereignisse reagieren lassen
Sie können einen click-Event-Listener hinzufügen, damit Markierungen auf Klicks und Tastaturereignisse reagieren.
function initMap() {
const map = new Map3DElement({
center: { lat: 37.4690, lng: -122.1074, altitude: 0 },
tilt: 67.5,
range: 45000,
mode: MapMode.HYBRID
});
const interactiveMarker = new google.maps.marker.Marker3DInteractiveElement({
map,
position: {lat: 37.4239163, lng: -122.0947209},
});
interactiveMarker.addEventListener('gmp-click', (event) => {
// Handle the click event.
// ...
});
}
Konfliktverhalten von Markierungen konfigurieren
Sie können festlegen, was passieren soll, wenn sich eine Markierung mit einer anderen Markierung oder einem Kartenlabel überschneidet.
const marker = new Marker3DElement({
position: {lat, lng},
collisionBehavior: google.maps.CollisionBehavior.REQUIRED
});