Mithilfe von Markierungen können Sie die Aufmerksamkeit der Nutzenden auf einen Ort auf einer Karte lenken. In diesem Leitfaden wird beschrieben, wie Sie Markierungen in 3D-Karten verwenden und anpassen. Sie können die Form, Größe und Farbe von Markierungen sowie die Höhe festlegen, in der sie angezeigt werden.
Verwenden Sie Markierungen, um Standorte auf Karten darzustellen. Das Beispiel oben zeigt eine einfache einzelne Markierung, für die keine Anpassungen vorgenommen wurden.
Farbe, Maßstab 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 die Markierung extrudieren und die Höhe festlegen.
Markierungen auf Klick- und Tastaturereignisse reagieren lassen
Fügen Sie einen click-Event-Listener hinzu, 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
Geben Sie an, wie sich eine Markierung verhalten soll, wenn sie mit einer anderen Markierung oder einem Kartenlabel kollidiert.
const marker = new Marker3DElement({
position: {lat, lng},
collisionBehavior: google.maps.CollisionBehavior.REQUIRED
});