Draw on the map

Klasse MarkerElement

google.maps.maps3d.MarkerElement class
extends HTMLElement
implements MarkerElementOptions
library "maps3d"

Zeigt eine Position auf einer 3D-Karte an. Beachten Sie, dass position festgelegt sein muss, damit MarkerElement angezeigt wird.

      
<gmp-marker
  altitude-mode="value-name"
  anchor-left="string"
  anchor-top="string"
  autofits-camera
  collision-behavior="value-name"
  collision-priority="number"
  position="lat,lng"
  title="string">
</gmp-marker>
 
const {MarkerElement} = await google.maps.importLibrary("maps3d");
MarkerElement
MarkerElement([options])
Parameter:
Erstellt ein MarkerElement-Objekt mit den angegebenen Optionen.
altitudeMode
attr: altitude-mode
Eingabetyp: AltitudeMode optional
Ausgabetyp: AltitudeMode
Standard: AltitudeMode.CLAMP_TO_GROUND
Gibt an, wie die Höhenkomponente der Position interpretiert wird.
HTML-Attribut: altitude-mode="value-name"
anchorLeft
attr: anchor-left
Eingabetyp: string optional
Ausgabetyp: string
Standard: -50%
Ein CSS-Längenprozentwert, der verwendet wird, um den Ankerpunkt von der oberen linken Ecke der Markierung zu versetzen. Das ist nützlich, wenn Sie ein visuelles Element verwenden, dessen Ankerpunkt sich von dem typischen unteren Mittelpunkt der Standardmarkierung unterscheidet.
HTML-Attribut: anchor-left="string"
anchorTop
attr: anchor-top
Eingabetyp: string optional
Ausgabetyp: string
Standard: -100 %
Ein CSS-Längenprozentwert, der verwendet wird, um den Ankerpunkt von der oberen linken Ecke der Markierung zu versetzen. Das ist nützlich, wenn Sie ein visuelles Element verwenden, dessen Ankerpunkt sich von dem typischen unteren Mittelpunkt der Standardmarkierung unterscheidet.
HTML-Attribut: anchor-top="string"
AlphaautofitsCamera
attr: autofits-camera
Typ: boolean optional
Standard: false
Falls angegeben, wird die angegebene Markierung im Darstellungsbereich der Karte zusammen mit allen anderen Elementen angezeigt, die aktiviert wurden.
HTML-Attribut: autofits-camera
collisionBehavior
attr: collision-behavior
Eingabetyp: CollisionBehavior optional
Ausgabetyp: CollisionBehavior
Standard: CollisionBehavior.REQUIRED
Eine Aufzählung, die angibt, wie sich ein MarkerElement verhalten soll, wenn es sich mit einem anderen MarkerElement, Marker3DElement oder mit den Labels der Basiskarte überschneidet.
HTML-Attribut: collision-behavior="value-name"
collisionPriority
attr: collision-priority
Eingabetyp: number optional
Ausgabetyp: number optional
Eine Zahl, mit der die relative Priorität zwischen CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY-Markierungen (einschließlich Marker3DElement) festgelegt wird. Ein höherer collisionPriority-Wert gibt eine höhere Priorität an.
HTML-Attribut: collision-priority="number"
position
attr: position
Eingabetyp: LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional
Ausgabetyp: LatLngAltitude optional
Die Position der Markierungsspitze. Die Höhe wird in bestimmten Modi ignoriert und ist daher optional.
HTML-Attribut:
  • position="lat,lng"
  • position="lat,lng,altitude"
title
attr: title
Typ: string
Rollover-Text. Falls angegeben, wird der MarkerElement ein Text für Bedienungshilfen (z.B. für die Verwendung mit Screenreadern) mit dem angegebenen Wert hinzugefügt.
HTML-Attribut: title="string"
default
Alle benutzerdefinierten Elemente, die direkt dem MarkerElement hinzugefügt werden, werden in Slots eingefügt.
z-index
Der Z-Index dieser Markierung. Weitere Informationen finden Sie in der z-index-Dokumentation. Sich überschneidende Markierungen mit einem größeren Z-Index verdecken solche mit einem kleineren Z-Index. Standardmäßig werden Markierungen entsprechend ihrer DOM-Position angezeigt. Markierungen, die später im DOM hinzugefügt werden, werden vor Markierungen angezeigt, die früher im DOM hinzugefügt wurden.
Übernommen: addEventListener, removeEventListener

Schnittstelle MarkerElementOptions

Schnittstelle google.maps.maps3d.MarkerElementOptions

MarkerElementOptions-Objekt, mit dem die Eigenschaften definiert werden, die für ein MarkerElement festgelegt werden können.
altitudeMode
optional
Typ: AltitudeMode optional
MarkerElement.altitudeMode ansehen.
anchorLeft
optional
Typ: string optional
MarkerElement.anchorLeft ansehen.
anchorTop
optional
Typ: string optional
MarkerElement.anchorTop ansehen.
AlphaautofitsCamera
optional
Typ: boolean optional
AlphaMarkerElement.autofitsCamera ansehen.
collisionBehavior
optional
Typ: CollisionBehavior optional
MarkerElement.collisionBehavior ansehen.
collisionPriority
optional
Typ: number optional
MarkerElement.collisionPriority ansehen.
position
optional
MarkerElement.position ansehen.
title
optional
Typ: string optional
MarkerElement.title ansehen.

MarkerInteractiveElement-Klasse

google.maps.maps3d.MarkerInteractiveElement class
extends MarkerElement
implements MarkerInteractiveElementOptions
library "maps3d"

Zeigt eine Position auf einer 3D-Karte an. Beachten Sie, dass position festgelegt sein muss, damit MarkerInteractiveElement angezeigt wird. Im Gegensatz zu MarkerElement erhält MarkerInteractiveElement ein gmp-click-Ereignis.

<gmp-marker-interactive
  gmp-popover-target-element="popover-id">
</gmp-marker-interactive>
 
const {MarkerInteractiveElement} = await google.maps.importLibrary("maps3d");
MarkerInteractiveElement
MarkerInteractiveElement([options])
Parameter:
Erstellt ein MarkerInteractiveElement-Objekt mit den angegebenen Optionen.
gmpPopoverTargetElement
attr: gmp-popover-target-element
Eingabetyp: PopoverElement optional
Ausgabetyp: PopoverElement optional
Wenn diese Option festgelegt ist, wird das Popover-Element geöffnet, wenn auf diese Markierung geklickt wird.
HTML-Attribut: gmp-popover-target-element="popover-id"
Übernommen: altitudeMode (attr: altitude-mode), anchorLeft (attr: anchor-left), anchorTop (attr: anchor-top), AlphaautofitsCamera (attr: autofits-camera), collisionBehavior (attr: collision-behavior), collisionPriority (attr: collision-priority), position (attr: position), title (attr: title)
Übernommen: default
Übernommen: z-index
Übernommen: addEventListener, removeEventListener
gmp-click
function(clickEvent)
Argumente:
Dieses Ereignis wird ausgelöst, wenn auf das MarkerInteractiveElement-Element geklickt wird.

MarkerInteractiveElementOptions-Schnittstelle

google.maps.maps3d.MarkerInteractiveElementOptions interface
extends MarkerElementOptions

Das MarkerInteractiveElementOptions-Objekt wird verwendet, um die Eigenschaften zu definieren, die für ein MarkerInteractiveElement festgelegt werden können.
gmpPopoverTargetElement
optional
Typ: PopoverElement optional
MarkerInteractiveElement.gmpPopoverTargetElement ansehen.
Übernommen: altitudeMode, anchorLeft, anchorTop, AlphaautofitsCamera, collisionBehavior, collisionPriority, position, title

Klasse Marker3DElement

google.maps.maps3d.Marker3DElement class
extends HTMLElement
implements Marker3DElementOptions
library "maps3d"

Zeigt eine Position auf einer 3D-Karte an. Beachten Sie, dass position festgelegt sein muss, damit Marker3DElement angezeigt wird.

     
<gmp-marker-3d
  altitude-mode="value-name"
  autofits-camera
  collision-behavior="value-name"
  collision-priority="number"
  draws-when-occluded
  extruded
  label="string"
  position="lat,lng"
  size-preserved
  z-index="number">
</gmp-marker-3d>
 
const {Marker3DElement} = await google.maps.importLibrary("maps3d");
Marker3DElement
Marker3DElement([options])
Parameter:
Erstellt ein Marker3DElement-Objekt mit den angegebenen Optionen.
altitudeMode
attr: altitude-mode
Eingabetyp: AltitudeMode optional
Ausgabetyp: AltitudeMode
Standard: AltitudeMode.CLAMP_TO_GROUND
Gibt an, wie die Höhenkomponente der Position interpretiert wird.
HTML-Attribut: altitude-mode="value-name"
AlphaautofitsCamera
attr: autofits-camera
Eingabetyp: boolean optional
Ausgabetyp: boolean
Standard: false
Falls angegeben, wird die angegebene Markierung im Darstellungsbereich der Karte zusammen mit allen anderen Elementen angezeigt, die aktiviert wurden.
HTML-Attribut: autofits-camera
collisionBehavior
attr: collision-behavior
Eingabetyp: CollisionBehavior optional
Ausgabetyp: CollisionBehavior
Standard: CollisionBehavior.REQUIRED
Eine Aufzählung, die angibt, wie sich ein Marker3DElement verhalten soll, wenn es sich mit einem anderen Marker3DElement oder mit den Labels der Basiskarte überschneidet.
HTML-Attribut: collision-behavior="value-name"
collisionPriority
attr: collision-priority
Eingabetyp: number optional
Ausgabetyp: number optional
Die Kollisionspriorität, die für die Kollisionserkennung verwendet wird.
HTML-Attribut: collision-priority="number"
drawsWhenOccluded
attr: draws-when-occluded
Eingabetyp: boolean optional
Ausgabetyp: boolean
Standard: false
Gibt an, ob diese Markierung gezeichnet werden soll, wenn sie verdeckt ist. Die Markierung kann durch Kartengeometrie (z.B. Gebäude) verdeckt werden.
HTML-Attribut: draws-when-occluded
extruded
attr: extruded
Eingabetyp: boolean optional
Ausgabetyp: boolean
Standard: false
Gibt an, ob die Markierung mit dem Boden verbunden werden soll. Damit eine Markierung extrudiert werden kann, muss altitudeMode entweder RELATIVE_TO_GROUND oder ABSOLUTE sein.
HTML-Attribut: extruded
label
attr: label
Eingabetyp: string optional
Ausgabetyp: string optional
Text, der von dieser Markierung angezeigt werden soll.
HTML-Attribut: label="string"
position
attr: position
Eingabetyp: LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional
Ausgabetyp: LatLngAltitude optional
Die Position der Markierungsspitze. Die Höhe wird in bestimmten Modi ignoriert und ist daher optional.
HTML-Attribut:
  • position="lat,lng"
  • position="lat,lng,altitude"
sizePreserved
attr: size-preserved
Eingabetyp: boolean optional
Ausgabetyp: boolean
Standard: false
Gibt an, ob diese Markierung unabhängig von der Entfernung zur Kamera ihre Größe beibehalten soll oder nicht. Standardmäßig wird die Markierung basierend auf der Entfernung zur Kamera/Neigung skaliert.
HTML-Attribut: size-preserved
zIndex
attr: z-index
Eingabetyp: number optional
Ausgabetyp: number optional
Der zIndex im Vergleich zu anderen Markierungen.
HTML-Attribut: z-index="number"
default
Alle benutzerdefinierten Elemente, die direkt dem Marker3DElement hinzugefügt werden, werden eingefügt. Es werden jedoch nur Elemente der Typen HTMLImageElement, SVGElement und PinElement zum Zeichnen von Markierungen verwendet. Andere Elemente werden ignoriert.
HTMLImageElement und SVGElement müssen in ein <template>-Element eingeschlossen werden, bevor sie dem Standard-Slot von Marker3DElement zugewiesen werden.

Bilder und SVGs werden derzeit gerastert, bevor sie in der 3D-Szene gerendert werden. Benutzerdefiniertes HTML, das in SVG eingebettet ist, oder CSS-Klassen, die Bildern hinzugefügt wurden, werden daher nicht angewendet und sind möglicherweise nicht zu sehen, wenn Markierungen auf dem Bildschirm angezeigt werden.
Übernommen: addEventListener, removeEventListener

Marker3DElementOptions-Schnittstelle

Schnittstelle google.maps.maps3d.Marker3DElementOptions

Marker3DElementOptions-Objekt, mit dem die Eigenschaften definiert werden, die für ein Marker3DElement festgelegt werden können.
altitudeMode
optional
Typ: AltitudeMode optional
Marker3DElement.altitudeMode ansehen.
AlphaautofitsCamera
optional
Typ: boolean optional
AlphaMarker3DElement.autofitsCamera ansehen.
collisionBehavior
optional
Typ: CollisionBehavior optional
Marker3DElement.collisionBehavior ansehen.
collisionPriority
optional
Typ: number optional
Marker3DElement.collisionPriority ansehen.
drawsWhenOccluded
optional
Typ: boolean optional
Marker3DElement.drawsWhenOccluded ansehen.
extruded
optional
Typ: boolean optional
Marker3DElement.extruded ansehen.
label
optional
Typ: string optional
Marker3DElement.label ansehen.
position
optional
Marker3DElement.position ansehen.
sizePreserved
optional
Typ: boolean optional
Marker3DElement.sizePreserved ansehen.
zIndex
optional
Typ: number optional
Marker3DElement.zIndex ansehen.

Marker3DInteractiveElement-Klasse

google.maps.maps3d.Marker3DInteractiveElement class
extends Marker3DElement
implements Marker3DInteractiveElementOptions
library "maps3d"

Zeigt eine Position auf einer 3D-Karte an. Beachten Sie, dass position festgelegt sein muss, damit Marker3DInteractiveElement angezeigt wird. Im Gegensatz zu Marker3DElement erhält Marker3DInteractiveElement ein gmp-click-Ereignis.

 
<gmp-marker-3d-interactive
  gmp-popover-target-element="popover-id"
  title="string">
</gmp-marker-3d-interactive>
 
const {Marker3DInteractiveElement} = await google.maps.importLibrary("maps3d");
Marker3DInteractiveElement
Marker3DInteractiveElement([options])
Parameter:
Erstellt ein Marker3DInteractiveElement-Objekt mit den angegebenen Optionen.
gmpPopoverTargetElement
attr: gmp-popover-target-element
Eingabetyp: PopoverElement optional
Ausgabetyp: PopoverElement optional
Wenn diese Option festgelegt ist, wird das Popover-Element geöffnet, wenn auf diese Markierung geklickt wird.
HTML-Attribut: gmp-popover-target-element="popover-id"
title
attr: title
Typ: string
Rollover-Text. Falls angegeben, wird der Marker3DInteractiveElement ein Text für Bedienungshilfen (z.B. für die Verwendung mit Screenreadern) mit dem angegebenen Wert hinzugefügt.
HTML-Attribut: title="string"
Übernommen: altitudeMode (attr: altitude-mode), AlphaautofitsCamera (attr: autofits-camera), collisionBehavior (attr: collision-behavior), collisionPriority (attr: collision-priority), drawsWhenOccluded (attr: draws-when-occluded), extruded (attr: extruded), label (attr: label), position (attr: position), sizePreserved (attr: size-preserved), zIndex (attr: z-index)
default
Alle benutzerdefinierten Elemente, die direkt dem Marker3DInteractiveElement hinzugefügt werden, werden eingefügt. Es werden jedoch nur Elemente vom Typ PinElement zum Zeichnen von Markierungen verwendet. Andere Elemente werden ignoriert.
Übernommen: addEventListener, removeEventListener
gmp-click
function(clickEvent)
Argumente:
Dieses Ereignis wird ausgelöst, wenn auf das Marker3DInteractiveElement-Element geklickt wird.

Marker3DInteractiveElementOptions-Schnittstelle

google.maps.maps3d.Marker3DInteractiveElementOptions interface
extends Marker3DElementOptions

Das Marker3DInteractiveElementOptions-Objekt wird verwendet, um die Eigenschaften zu definieren, die für ein Marker3DInteractiveElement festgelegt werden können.
gmpPopoverTargetElement
optional
Typ: PopoverElement optional
Marker3DInteractiveElement.gmpPopoverTargetElement ansehen.
title
optional
Typ: string optional
Marker3DInteractiveElement.title ansehen.
Übernommen: altitudeMode, AlphaautofitsCamera, collisionBehavior, collisionPriority, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex

Model3DElement-Klasse

google.maps.maps3d.Model3DElement class
extends HTMLElement
implements Model3DElementOptions
library "maps3d"

Ein 3D-Modell, mit dem gLTF-Modelle gerendert werden können. Beachten Sie, dass position und src festgelegt sein müssen, damit Model3DElement angezeigt wird.

Die wichtigsten Eigenschaften von gLTF PBR sollten unterstützt werden. Derzeit werden keine Erweiterungen oder Erweiterungs-Properties unterstützt.

    
<gmp-model-3d
  altitude-mode="value-name"
  orientation="heading,tilt,roll"
  position="lat,lng"
  scale="number"
  src="url">
</gmp-model-3d>
 
const {Model3DElement} = await google.maps.importLibrary("maps3d");
Model3DElement
Model3DElement([options])
Parameter:
Erstellt ein Model3DElement-Objekt mit den angegebenen Optionen.
altitudeMode
attr: altitude-mode
Eingabetyp: AltitudeMode optional
Ausgabetyp: AltitudeMode
Standard: AltitudeMode.CLAMP_TO_GROUND
Gibt an, wie die Höhe in der Position interpretiert wird.
HTML-Attribut: altitude-mode="value-name"
orientation
attr: orientation
Eingabetyp: Orientation3D|Orientation3DLiteral optional
Ausgabetyp: Orientation3D optional
Beschreibt die Drehung des Koordinatensystems eines 3D-Modells, um das Modell auf der 3D-Karte zu positionieren.

Drehungen werden in der folgenden Reihenfolge auf das Modell angewendet: Rollen, Neigen und dann Gieren.
HTML-Attribut: orientation="heading,tilt,roll"
position
attr: position
Eingabetyp: LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional
Ausgabetyp: LatLngAltitude optional
Legt die Position des Model3DElement fest. Die Höhe wird in bestimmten Modi ignoriert und ist daher optional.
HTML-Attribut:
  • position="lat,lng"
  • position="lat,lng,altitude"
scale
attr: scale
Eingabetyp: number|Vector3D|Vector3DLiteral optional
Ausgabetyp: Vector3D optional
Standard: 1
Skaliert das Modell entlang der x-, y- und z-Achse im Koordinatenraum des Modells.
HTML-Attribut:
  • scale="number"
  • scale="x,y,z"
src
attr: src
Eingabetyp: string|URL optional
Ausgabetyp: URL optional
Gibt die URL des 3D-Modells an. Derzeit werden nur Modelle im .glb-Format unterstützt.

Alle relativen HTTP-URLs werden in die entsprechenden absoluten URLs aufgelöst.

Wenn Sie Ihre .glb-Modelldateien auf einer anderen Website oder einem anderen Server als Ihre Hauptanwendung hosten, müssen Sie die richtigen CORS-HTTP-Header einrichten. Dadurch kann Ihre Anwendung sicher auf die Modelldateien aus der anderen Domain zugreifen.
HTML-Attribut: src="url"
Übernommen: addEventListener, removeEventListener

Model3DElementOptions-Schnittstelle

Schnittstelle google.maps.maps3d.Model3DElementOptions

Model3DElementOptions-Objekt, mit dem die Eigenschaften definiert werden, die für ein Model3DElement festgelegt werden können.
altitudeMode
optional
Typ: AltitudeMode optional
Model3DElement.altitudeMode ansehen.
orientation
optional
Model3DElement.orientation ansehen.
position
optional
Model3DElement.position ansehen.
scale
optional
Typ: number|Vector3D|Vector3DLiteral optional
Model3DElement.scale ansehen.
src
optional
Typ: string|URL optional
Model3DElement.src ansehen.

Model3DInteractiveElement-Klasse

google.maps.maps3d.Model3DInteractiveElement class
extends Model3DElement
implements Model3DInteractiveElementOptions
library "maps3d"

Ein 3D-Modell, mit dem gLTF-Modelle gerendert werden können. Beachten Sie, dass position und src festgelegt sein müssen, damit Model3DElement angezeigt wird.

Die wichtigsten Eigenschaften von gLTF PBR sollten unterstützt werden. Derzeit werden keine Erweiterungen oder Erweiterungs-Properties unterstützt.

Im Gegensatz zu Model3DElement erhält Model3DInteractiveElement ein gmp-click-Ereignis.

<gmp-model-3d-interactive></gmp-model-3d-interactive>
 
const {Model3DInteractiveElement} = await google.maps.importLibrary("maps3d");
Model3DInteractiveElement
Model3DInteractiveElement([options])
Parameter:
Erstellt ein Model3DInteractiveElement-Objekt mit den angegebenen Optionen.
Übernommen: altitudeMode (attr: altitude-mode), orientation (attr: orientation), position (attr: position), scale (attr: scale), src (attr: src)
Übernommen: addEventListener, removeEventListener
gmp-click
function(clickEvent)
Argumente:
Dieses Ereignis wird ausgelöst, wenn auf das Model3DInteractiveElement-Element geklickt wird.

Model3DInteractiveElementOptions-Schnittstelle

google.maps.maps3d.Model3DInteractiveElementOptions interface
extends Model3DElementOptions

Model3DInteractiveElementOptions-Objekt, mit dem die Eigenschaften definiert werden, die für ein Model3DInteractiveElement festgelegt werden können.
Übernommen: altitudeMode, orientation, position, scale, src

Polyline3DElement-Klasse

google.maps.maps3d.Polyline3DElement class
extends HTMLElement
implements Polyline3DElementOptions
library "maps3d"

Eine 3D-Polylinie ist ein lineares Overlay, das aus verbundenen Liniensegmenten auf einer 3D-Karte besteht.

      
<gmp-polyline-3d
  altitude-mode="value-name"
  autofits-camera
  draws-occluded-segments
  extruded
  geodesic
  outer-color="string"
  outer-width="number"
  path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."
  stroke-color="string"
  stroke-width="number"
  z-index="number">
</gmp-polyline-3d>
 
const {Polyline3DElement} = await google.maps.importLibrary("maps3d");
Polyline3DElement
Polyline3DElement([options])
Parameter:
Erstellt ein Polyline3DElement-Objekt mit den angegebenen Optionen.
altitudeMode
attr: altitude-mode
Eingabetyp: AltitudeMode optional
Ausgabetyp: AltitudeMode
Standard: AltitudeMode.CLAMP_TO_GROUND
Gibt an, wie Höhenkomponenten in den Koordinaten interpretiert werden.
HTML-Attribut: altitude-mode="value-name"
AlphaautofitsCamera
attr: autofits-camera
Eingabetyp: boolean optional
Ausgabetyp: boolean
Standard: false
Falls angegeben, wird die angegebene Polylinie im Darstellungsbereich der Karte angezeigt, zusammen mit allen anderen Elementen, die aktiviert wurden.
HTML-Attribut: autofits-camera
drawsOccludedSegments
attr: draws-occluded-segments
Eingabetyp: boolean optional
Ausgabetyp: boolean
Standard: false
Gibt an, ob Teile der Polylinie, die verdeckt sein könnten, gezeichnet werden oder nicht. Polylinien können durch Kartengeometrie (z.B. Gebäude) verdeckt werden.
HTML-Attribut: draws-occluded-segments
extruded
attr: extruded
Eingabetyp: boolean optional
Ausgabetyp: boolean
Standard: false
Gibt an, ob die Polylinie mit dem Boden verbunden werden soll. Wenn Sie eine Polylinie extrudieren möchten, muss altitudeMode entweder RELATIVE_TO_GROUND oder ABSOLUTE sein.
HTML-Attribut: extruded
geodesic
attr: geodesic
Eingabetyp: boolean optional
Ausgabetyp: boolean
Standard: false
Wenn true, werden die Kanten der Polylinie als geodätisch interpretiert und folgen der Erdkrümmung. Wenn false, werden die Kanten der Polylinie als gerade Linien im Bildschirmbereich gerendert.
HTML-Attribut: geodesic
outerColor
attr: outer-color
Eingabetyp: string optional
Ausgabetyp: string optional
Die äußere Farbe. Alle CSS3-Farben werden unterstützt.
HTML-Attribut: outer-color="string"
outerWidth
attr: outer-width
Eingabetyp: number optional
Ausgabetyp: number optional
Die äußere Breite liegt zwischen 0.0 und 1.0. Dies ist ein Prozentsatz des strokeWidth.
HTML-Attribut: outer-width="number"
path
attr: path
Die geordnete Reihenfolge der Koordinaten der Polylinie. Die Höhe wird in bestimmten Modi ignoriert und ist daher optional.
HTML-Attribut: path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."
strokeColor
attr: stroke-color
Eingabetyp: string optional
Ausgabetyp: string optional
Die Strichfarbe. Alle CSS3-Farben werden unterstützt.
HTML-Attribut: stroke-color="string"
strokeWidth
attr: stroke-width
Eingabetyp: number optional
Ausgabetyp: number optional
Die Linienstärke in Pixeln.
HTML-Attribut: stroke-width="number"
zIndex
attr: z-index
Eingabetyp: number optional
Ausgabetyp: number optional
Der zIndex im Vergleich zu anderen Polys.
HTML-Attribut: z-index="number"
coordinates
Die geordnete Reihenfolge der Koordinaten der Polylinie. Die Höhe wird in bestimmten Modi ignoriert und ist daher optional.
Übernommen: addEventListener, removeEventListener

Polyline3DElementOptions-Schnittstelle

Schnittstelle google.maps.maps3d.Polyline3DElementOptions

Das Polyline3DElementOptions-Objekt wird verwendet, um die Eigenschaften zu definieren, die für ein Polyline3DElement festgelegt werden können.
altitudeMode
optional
Typ: AltitudeMode optional
Polyline3DElement.altitudeMode ansehen.
AlphaautofitsCamera
optional
Typ: boolean optional
AlphaPolyline3DElement.autofitsCamera ansehen.
coordinates
optional
Polyline3DElement.coordinates ansehen.
drawsOccludedSegments
optional
Typ: boolean optional
Polyline3DElement.drawsOccludedSegments ansehen.
extruded
optional
Typ: boolean optional
Polyline3DElement.extruded ansehen.
geodesic
optional
Typ: boolean optional
Polyline3DElement.geodesic ansehen.
outerColor
optional
Typ: string optional
Polyline3DElement.outerColor ansehen.
outerWidth
optional
Typ: number optional
Polyline3DElement.outerWidth ansehen.
path
optional
Polyline3DElement.path ansehen.
strokeColor
optional
Typ: string optional
Polyline3DElement.strokeColor ansehen.
strokeWidth
optional
Typ: number optional
Polyline3DElement.strokeWidth ansehen.
zIndex
optional
Typ: number optional
Polyline3DElement.zIndex ansehen.

Polyline3DInteractiveElement-Klasse

google.maps.maps3d.Polyline3DInteractiveElement class
extends Polyline3DElement
implements Polyline3DInteractiveElementOptions
library "maps3d"

Eine 3D-Polylinie ist ein lineares Overlay, das aus verbundenen Liniensegmenten auf einer 3D-Karte besteht. Im Gegensatz zu Polyline3DElement erhält Polyline3DInteractiveElement ein gmp-click-Ereignis.

<gmp-polyline-3d-interactive></gmp-polyline-3d-interactive>
 
const {Polyline3DInteractiveElement} = await google.maps.importLibrary("maps3d");
Polyline3DInteractiveElement
Polyline3DInteractiveElement([options])
Parameter:
Erstellt ein Polyline3DInteractiveElement-Objekt mit den angegebenen Optionen.
Übernommen: altitudeMode (attr: altitude-mode), AlphaautofitsCamera (attr: autofits-camera), drawsOccludedSegments (attr: draws-occluded-segments), extruded (attr: extruded), geodesic (attr: geodesic), outerColor (attr: outer-color), outerWidth (attr: outer-width), path (attr: path), strokeColor (attr: stroke-color), strokeWidth (attr: stroke-width), zIndex (attr: z-index), coordinates
Übernommen: addEventListener, removeEventListener
gmp-click
function(clickEvent)
Argumente:
  • clickEvent: LocationClickEvent optional Das Ereignisobjekt enthält die Position des Klicks (Breitengrad, Längengrad, Höhe).
Dieses Ereignis wird ausgelöst, wenn auf das Polyline3DInteractiveElement-Element geklickt wird.

Polyline3DInteractiveElementOptions-Schnittstelle

google.maps.maps3d.Polyline3DInteractiveElementOptions interface
extends Polyline3DElementOptions

Das Polyline3DInteractiveElementOptions-Objekt wird verwendet, um die Eigenschaften zu definieren, die für ein Polyline3DInteractiveElement festgelegt werden können.
Übernommen: altitudeMode, AlphaautofitsCamera, coordinates, drawsOccludedSegments, extruded, geodesic, outerColor, outerWidth, path, strokeColor, strokeWidth, zIndex

Polygon3DElement-Klasse

google.maps.maps3d.Polygon3DElement class
extends HTMLElement
implements Polygon3DElementOptions
library "maps3d"

Ein 3D-Polygon (wie eine 3D-Polylinie) definiert eine Reihe verbundener Koordinaten in einer geordneten Reihenfolge. Außerdem bilden Polygone eine geschlossene Schleife und definieren einen gefüllten Bereich.

    
<gmp-polygon-3d
  autofits-camera
  draws-occluded-segments
  extruded
  fill-color="string"
  geodesic
  path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."
  stroke-color="string"
  stroke-width="number"
  z-index="number">
</gmp-polygon-3d>
 
const {Polygon3DElement} = await google.maps.importLibrary("maps3d");
Polygon3DElement
Polygon3DElement([options])
Parameter:
Erstellt ein Polygon3DElement-Objekt mit den angegebenen Optionen.
altitudeMode
Eingabetyp: AltitudeMode optional
Ausgabetyp: AltitudeMode
Standard: AltitudeMode.CLAMP_TO_GROUND
Gibt an, wie Höhenkomponenten in den Koordinaten interpretiert werden.
AlphaautofitsCamera
attr: autofits-camera
Eingabetyp: boolean optional
Ausgabetyp: boolean
Standard: false
Falls angegeben, wird das Polygon im Darstellungsbereich der Karte angezeigt, zusammen mit allen anderen Elementen, die aktiviert wurden.
HTML-Attribut: autofits-camera
drawsOccludedSegments
attr: draws-occluded-segments
Eingabetyp: boolean optional
Ausgabetyp: boolean
Standard: false
Gibt an, ob Teile des Polygons, die verdeckt sein könnten, gezeichnet werden oder nicht. Polygone können durch Kartengeometrie (z.B. Gebäude) verdeckt werden.
HTML-Attribut: draws-occluded-segments
extruded
attr: extruded
Eingabetyp: boolean optional
Ausgabetyp: boolean
Standard: false
Gibt an, ob das Polygon mit dem Boden verbunden werden soll. Um ein Polygon zu extrudieren, muss altitudeMode entweder RELATIVE_TO_GROUND oder ABSOLUTE sein.
HTML-Attribut: extruded
fillColor
attr: fill-color
Eingabetyp: string optional
Ausgabetyp: string optional
Die Füllfarbe. Alle CSS3-Farben werden unterstützt.
HTML-Attribut: fill-color="string"
geodesic
attr: geodesic
Eingabetyp: boolean optional
Ausgabetyp: boolean
Standard: false
Wenn true, werden die Kanten des Polygons als geodätisch interpretiert und folgen der Erdkrümmung. Wenn false, werden die Kanten des Polygons als gerade Linien im Bildschirmbereich gerendert.
HTML-Attribut: geodesic
innerPaths
Die geordnete Reihenfolge der Koordinaten, mit denen eine geschlossene Schlaufe beschrieben wird. Im Gegensatz zu Polylinien kann ein Polygon aus einem oder mehreren Pfaden bestehen, die mehrere Ausschnitte innerhalb des Polygons erzeugen.
path
attr: path
Die geordnete Reihenfolge der Koordinaten, mit denen eine geschlossene Schlaufe beschrieben wird. Die Höhe wird in bestimmten Modi ignoriert und ist daher optional.
HTML-Attribut: path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."
strokeColor
attr: stroke-color
Eingabetyp: string optional
Ausgabetyp: string optional
Die Strichfarbe. Alle CSS3-Farben werden unterstützt.
HTML-Attribut: stroke-color="string"
strokeWidth
attr: stroke-width
Eingabetyp: number optional
Ausgabetyp: number optional
Die Linienstärke in Pixeln.
HTML-Attribut: stroke-width="number"
zIndex
attr: z-index
Eingabetyp: number optional
Ausgabetyp: number optional
Der zIndex im Vergleich zu anderen Polys.
HTML-Attribut: z-index="number"
outerCoordinates
Die geordnete Reihenfolge der Koordinaten, mit denen eine geschlossene Schlaufe beschrieben wird. Die Höhe wird in bestimmten Modi ignoriert und ist daher optional.
innerCoordinates
Die geordnete Reihenfolge der Koordinaten, mit denen eine geschlossene Schlaufe beschrieben wird. Im Gegensatz zu Polylinien kann ein Polygon aus einem oder mehreren Pfaden bestehen, die mehrere Ausschnitte innerhalb des Polygons erzeugen.
Übernommen: addEventListener, removeEventListener

Polygon3DElementOptions-Schnittstelle

Schnittstelle google.maps.maps3d.Polygon3DElementOptions

Das Polygon3DElementOptions-Objekt wird verwendet, um die Eigenschaften zu definieren, die für ein Polygon3DElement festgelegt werden können.
altitudeMode
optional
Typ: AltitudeMode optional
Polygon3DElement.altitudeMode ansehen.
AlphaautofitsCamera
optional
Typ: boolean optional
AlphaPolygon3DElement.autofitsCamera ansehen.
drawsOccludedSegments
optional
Typ: boolean optional
Polygon3DElement.drawsOccludedSegments ansehen.
extruded
optional
Typ: boolean optional
Polygon3DElement.extruded ansehen.
fillColor
optional
Typ: string optional
Polygon3DElement.fillColor ansehen.
geodesic
optional
Typ: boolean optional
Polygon3DElement.geodesic ansehen.
innerCoordinates
optional
Polygon3DElement.innerCoordinates ansehen.
innerPaths
optional
Polygon3DElement.innerPaths ansehen.
outerCoordinates
optional
Polygon3DElement.outerCoordinates ansehen.
path
optional
Polygon3DElement.path ansehen.
strokeColor
optional
Typ: string optional
Polygon3DElement.strokeColor ansehen.
strokeWidth
optional
Typ: number optional
Polygon3DElement.strokeWidth ansehen.
zIndex
optional
Typ: number optional
Polygon3DElement.zIndex ansehen.

Polygon3DInteractiveElement-Klasse

google.maps.maps3d.Polygon3DInteractiveElement class
extends Polygon3DElement
implements Polygon3DInteractiveElementOptions
library "maps3d"

Ein 3D-Polygon (wie eine 3D-Polylinie) definiert eine Reihe verbundener Koordinaten in einer geordneten Reihenfolge. Außerdem bilden Polygone eine geschlossene Schleife und definieren einen gefüllten Bereich. Im Gegensatz zu Polygon3DElement erhält Polygon3DInteractiveElement ein gmp-click-Ereignis.

<gmp-polygon-3d-interactive></gmp-polygon-3d-interactive>
 
const {Polygon3DInteractiveElement} = await google.maps.importLibrary("maps3d");
Polygon3DInteractiveElement
Polygon3DInteractiveElement([options])
Parameter:
Erstellt ein Polygon3DInteractiveElement-Objekt mit den angegebenen Optionen.
Übernommen: altitudeMode, AlphaautofitsCamera (attr: autofits-camera), drawsOccludedSegments (attr: draws-occluded-segments), extruded (attr: extruded), fillColor (attr: fill-color), geodesic (attr: geodesic), innerPaths, path (attr: path), strokeColor (attr: stroke-color), strokeWidth (attr: stroke-width), zIndex (attr: z-index), outerCoordinates, innerCoordinates
Übernommen: addEventListener, removeEventListener
gmp-click
function(clickEvent)
Argumente:
  • clickEvent: LocationClickEvent optional Das Ereignisobjekt enthält die Position des Klicks (Breitengrad, Längengrad, Höhe).
Dieses Ereignis wird ausgelöst, wenn auf das Polygon3DInteractiveElement-Element geklickt wird.

Polygon3DInteractiveElementOptions-Schnittstelle

google.maps.maps3d.Polygon3DInteractiveElementOptions interface
extends Polygon3DElementOptions

Das Polygon3DInteractiveElementOptions-Objekt wird verwendet, um die Eigenschaften zu definieren, die für ein Polygon3DInteractiveElement festgelegt werden können.
Übernommen: altitudeMode, AlphaautofitsCamera, drawsOccludedSegments, extruded, fillColor, geodesic, innerCoordinates, innerPaths, outerCoordinates, path, strokeColor, strokeWidth, zIndex

FlattenerElement-Klasse

google.maps.maps3d.FlattenerElement class
extends HTMLElement
implements FlattenerElementOptions
library "maps3d"

Mit einem Glättungselement wird ein bestimmter Bereich auf der Karte geglättet.

<gmp-flattener
  path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ...">
</gmp-flattener>
 
const {FlattenerElement} = await google.maps.importLibrary("maps3d");
FlattenerElement
FlattenerElement([options])
Parameter:
innerPaths
Die geordnete Reihenfolge der Koordinaten, mit denen eine geschlossene Schlaufe beschrieben wird. Diese Pfade definieren Ausschlusslöcher innerhalb des Hauptpfads des Polygons, der die Abflachungszone ist. Bereiche innerhalb eines innerPath sind von der Abflachung ausgenommen.
path
attr: path
Die geordnete Reihenfolge der Koordinaten, mit denen eine geschlossene Schlaufe beschrieben wird. Diese Schleife definiert die Abflachungszone.
HTML-Attribut: path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."
Übernommen: addEventListener, removeEventListener

FlattenerElementOptions-Schnittstelle

Schnittstelle google.maps.maps3d.FlattenerElementOptions

FlattenerElementOptions-Objekt, mit dem die Eigenschaften definiert werden, die für ein FlattenerElement festgelegt werden können.
innerPaths
optional
FlattenerElement.innerPaths ansehen.
path
optional
FlattenerElement.path ansehen.

PopoverElement-Klasse

google.maps.maps3d.PopoverElement class
extends HTMLElement
implements PopoverElementOptions
library "maps3d"

Ein benutzerdefiniertes HTML-Element, das ein Popover rendert. Es sieht aus wie eine Sprechblase und ist oft mit einer Markierung verbunden.

<gmp-popover
  auto-pan-disabled
  light-dismiss-disabled
  open
  position-anchor="lat,lng">
</gmp-popover>
 
const {PopoverElement} = await google.maps.importLibrary("maps3d");
PopoverElement
PopoverElement([options])
Parameter:
altitudeMode
Eingabetyp: AltitudeMode optional
Ausgabetyp: AltitudeMode
Standard: AltitudeMode.CLAMP_TO_GROUND
Gibt an, wie die Höhenkomponente der Position interpretiert wird.
autoPanDisabled
attr: auto-pan-disabled
Eingabetyp: boolean optional
Ausgabetyp: boolean
Standard: false
Wenn „true“ festgelegt ist, wird das Schwenken der Karte deaktiviert, damit das Pop-over beim Öffnen vollständig sichtbar ist.
HTML-Attribut: auto-pan-disabled
lightDismissDisabled
attr: light-dismiss-disabled
Eingabetyp: boolean optional
Ausgabetyp: boolean
Standard: false
Gibt an, ob dieses Popover „leicht geschlossen“ werden soll oder nicht. Das Verhalten „Light Dismiss“ ähnelt dem Festlegen des Attributs popover="auto", das Teil der Popover API des Browsers ist.
HTML-Attribut: light-dismiss-disabled
open
attr: open
Eingabetyp: boolean optional
Ausgabetyp: boolean
Standard: false
Gibt an, ob dieses Popover geöffnet sein soll oder nicht.
HTML-Attribut: open
positionAnchor
attr: position-anchor
Die Position, an der dieses Popover angezeigt werden soll. Wenn das Popover an einer interaktiven Markierung verankert ist, wird stattdessen die Position der Markierung verwendet.
HTML-Attribut:
  • position-anchor="lat,lng"
  • position-anchor="lat,lng,altitude"
  • position-anchor="marker-id"
default
Platziert den Slotted-Inhalt im Hauptbereich des Popovers.
header
Platziert den eingefügten Inhalt im Überschriftsbereich des Popovers.
--gmp-popover-max-width
Maximale Breite des Popovers, unabhängig von der Breite des Inhalts.
--gmp-popover-min-width
Mindestbreite des Pop-overs, unabhängig von der Breite des Inhalts. Wenn Sie diese Property verwenden, sollten Sie sie auf einen Wert festlegen, der kleiner als die Breite der Karte (in Pixeln) ist.
--gmp-popover-pixel-offset-x
Der Versatz der Spitze des Popovers auf der X-Achse in Pixeln vom Punkt auf der Karte, an dessen geografischen Koordinaten das Popover verankert ist.
--gmp-popover-pixel-offset-y
Der Versatz der Spitze des Popovers auf der y-Achse in Pixeln vom Punkt auf der Karte, an dessen geografischen Koordinaten das Popover verankert ist.
background-color
Die Hintergrundfarbe des Popovers. Weitere Informationen finden Sie in der background-color-Dokumentation. Beachten Sie, dass das Standard-Popover für Orte ebenfalls von dieser Property betroffen ist. Verwenden Sie gezielte CSS-Klassen oder Inline-Stile für benutzerdefinierte Pop-over, um zu vermeiden, dass das Standard-Pop-over für Orte formatiert wird.
border-radius
Der Rahmenradius des Pop-overs. Weitere Informationen finden Sie in der border-radius-Dokumentation. Beachten Sie, dass das Standard-Popover für Orte ebenfalls von dieser Property betroffen ist. Verwenden Sie gezielte CSS-Klassen oder Inline-Stile für benutzerdefinierte Pop-over, um zu vermeiden, dass das Standard-Pop-over für Orte formatiert wird.
box-shadow
Der Box-Shadow des Pop-overs. Weitere Informationen finden Sie in der box-shadow-Dokumentation. Beachten Sie, dass das Standard-Popover für Orte ebenfalls von dieser Property betroffen ist. Verwenden Sie gezielte CSS-Klassen oder Inline-Stile für benutzerdefinierte Pop-over, um zu vermeiden, dass das Standard-Pop-over für Orte formatiert wird.
color-scheme
Gibt an, in welchem Farbschema dieses Popover gerendert werden kann. Weitere Informationen finden Sie in der color-scheme-Dokumentation. Wenn nicht angegeben, werden standardmäßig die Farbschema-Einstellungen des Nutzers verwendet.
padding
Das Padding des Pop-overs. Weitere Informationen finden Sie in der padding-Dokumentation. Beachten Sie, dass das Standard-Popover für Orte ebenfalls von dieser Property betroffen ist. Verwenden Sie gezielte CSS-Klassen oder Inline-Stile für benutzerdefinierte Pop-over, um zu vermeiden, dass das Standard-Pop-over für Orte formatiert wird.
Übernommen: addEventListener, removeEventListener

PopoverElementOptions-Schnittstelle

Schnittstelle google.maps.maps3d.PopoverElementOptions

PopoverElementOptions-Objekt, mit dem die Eigenschaften definiert werden, die für ein PopoverElement festgelegt werden können.
altitudeMode
optional
Typ: AltitudeMode optional
PopoverElement.altitudeMode ansehen.
autoPanDisabled
optional
Typ: boolean optional
PopoverElement.autoPanDisabled ansehen.
lightDismissDisabled
optional
Typ: boolean optional
PopoverElement.lightDismissDisabled ansehen.
open
optional
Typ: boolean optional
PopoverElement.open ansehen.
positionAnchor
optional
PopoverElement.positionAnchor ansehen.

AltitudeMode-Konstanten

google.maps.maps3d.AltitudeMode Konstanten
Bibliothek "maps3d"

Gibt an, wie Höhenkomponenten in den Koordinaten interpretiert werden.

Diese Konstanten können auch als Strings verwendet werden. In TypeScript werden die Stringliterale durch den Typ AltitudeModeString definiert.

const {AltitudeMode} = await google.maps.importLibrary("maps3d");
ABSOLUTE Ermöglicht die Angabe von Objekten relativ zum mittleren Meeresspiegel. Das bedeutet auch, dass die absolute Position des Objekts gleich bleibt, wenn sich der Detailgrad des Geländes unter dem Objekt ändert.
CLAMP_TO_GROUND Ermöglicht die Darstellung von Objekten, die auf dem Boden platziert sind. Sie bleiben unabhängig von der angegebenen Höhe auf Bodenhöhe und folgen dem Gelände. Wenn sich das Objekt über einem größeren Gewässer befindet, wird es auf Meereshöhe platziert.
RELATIVE_TO_GROUND Ermöglicht die Darstellung von Objekten relativ zur Erdoberfläche. Wenn sich der Detaillierungsgrad des Geländes ändert, bleibt die Position des Objekts relativ zum Boden konstant. Über Wasser wird die Höhe als Wert in Metern über dem Meeresspiegel interpretiert.
RELATIVE_TO_MESH Ermöglicht die Darstellung von Objekten relativ zur höchsten Oberfläche (Boden, Gebäude oder Wasseroberfläche). Über Wasser ist dies die Wasseroberfläche, über Gelände die Gebäudeoberfläche (falls vorhanden) oder die Bodenoberfläche (wenn keine Gebäude vorhanden sind).

Klasse CirclePathElement

google.maps.maps3d.CirclePathElement class
extends HTMLElement
implements CirclePathElementOptions
library "maps3d"

Ein 3D-Kreis-Overlay auf einer 3D-Karte.

 
<gmp-circle-path
  center="lat,lng,altitude"
  radius="number">
</gmp-circle-path>
 
const {CirclePathElement} = await google.maps.importLibrary("maps3d");
CirclePathElement
CirclePathElement([options])
Parameter:
Erstellt ein CirclePathElement-Objekt mit den angegebenen Optionen.
center
attr: center
Eingabetyp: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional
Ausgabetyp: LatLngAltitude optional
Der Mittelpunkt des Kreises.
HTML-Attribut: center="lat,lng,altitude"
radius
attr: radius
Eingabetyp: number optional
Ausgabetyp: number optional
Der Radius des Kreises in Metern.
HTML-Attribut: radius="number"
Übernommen: addEventListener, removeEventListener

CirclePathElementOptions-Schnittstelle

Schnittstelle google.maps.maps3d.CirclePathElementOptions

Das CirclePathElementOptions-Objekt wird verwendet, um die Eigenschaften zu definieren, die für ein CirclePathElement festgelegt werden können.
center
optional
CirclePathElement.center ansehen.
radius
optional
Typ: number optional
CirclePathElement.radius ansehen.