Maps

MapElement-Klasse

google.maps.MapElement Klasse

MapElement ist eine HTMLElement-Unterklasse zum Rendern von Karten. Nach dem Laden der maps-Bibliothek kann eine Karte in HTML erstellt werden. Beispiel: 

<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID">
  <button slot="control-block-start-inline-end">Custom Control</button>
</gmp-map>
Intern wird Map verwendet, auf das mit der Property MapElement.innerMap zugegriffen werden kann.

Benutzerdefiniertes Element:
<gmp-map center="lat,lng" heading-interaction-disabled internal-usage-attribution-ids="id1 id2" map-id="string" rendering-type="vector" tilt-interaction-disabled zoom="number"></gmp-map>

Diese Klasse erweitert HTMLElement.

Diese Klasse implementiert MapElementOptions.

Zugriff durch Anrufen von const {MapElement} = await google.maps.importLibrary("maps").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
MapElement
MapElement([options])
Parameter:
center
Typ:LatLng|LatLngLiteral optional
Breiten- und Längengrad für die Mitte der Karte.
HTML-Attribut
  • <gmp-map center="lat,lng"></gmp-map>
headingInteractionDisabled
Typ:boolean optional
Standard:false
Gibt an, ob Nutzer die Ausrichtung (Drehung) der Kamera auf der Karte steuern können. Diese Option ist nur wirksam, wenn es sich bei der Karte um eine Vektorkarte handelt. Wenn sie nicht im Code festgelegt ist, wird die Cloud-Konfiguration für die Karten-ID verwendet (falls verfügbar).
HTML-Attribut
  • <gmp-map heading-interaction-disabled></gmp-map>
innerMap
Typ:Map
Eine Referenz auf das Map, das vom MapElement intern verwendet wird.
internalUsageAttributionIds
Typ:Iterable<string> optional
Standard:null
Fügt dem Initialisierer eine ID für die Nutzungszuordnung hinzu, damit Google nachvollziehen kann, welche Bibliotheken und Beispiele für Entwickler hilfreich sind, z. B. die Verwendung einer Markierungs-Clustering-Bibliothek. Wenn Sie die ID für die Nutzungszuordnung nicht senden möchten, können Sie diese Property löschen oder den Wert durch einen leeren String ersetzen. Es werden nur eindeutige Werte gesendet. Änderungen an diesem Wert nach der Instanziierung werden möglicherweise ignoriert.
HTML-Attribut
  • <gmp-map internal-usage-attribution-ids="id1 id2"></gmp-map>
mapId
Typ:string optional
Die Karten-ID der Karte. Dieser Parameter kann nach der Instanziierung einer Karte nicht mehr festgelegt oder geändert werden. Map.DEMO_MAP_ID kann verwendet werden, um Funktionen auszuprobieren, für die eine Karten-ID, aber keine Cloud-Aktivierung erforderlich ist.
HTML-Attribut
  • <gmp-map map-id="string"></gmp-map>
renderingType
Typ:RenderingType optional
Standard:RenderingType.VECTOR
Ob die Karte eine Raster- oder Vektorkarte sein soll. Dieser Parameter kann nach der Instanziierung einer Karte nicht mehr festgelegt oder geändert werden. Wenn nicht festgelegt, wird der Rendertyp durch die Cloud-Konfiguration für die Karten-ID bestimmt (sofern verfügbar). Vektorkarten sind möglicherweise nicht für alle Geräte und Browser verfügbar. Bei Bedarf wird auf eine Rasterkarte zurückgegriffen.
HTML-Attribut
  • <gmp-map rendering-type="vector"></gmp-map>
  • <gmp-map rendering-type="raster"></gmp-map>
tiltInteractionDisabled
Typ:boolean optional
Standard:false
Gibt an, ob Nutzer die Neigung der Kamera auf der Karte anpassen können. Diese Option ist nur wirksam, wenn es sich bei der Karte um eine Vektorkarte handelt. Wenn sie nicht im Code festgelegt ist, wird die Cloud-Konfiguration für die Karten-ID verwendet (falls verfügbar).
HTML-Attribut
  • <gmp-map tilt-interaction-disabled></gmp-map>
zoom
Typ:number optional
Die Zoomstufe der Karte. Gültige Zoomwerte sind Zahlen von null bis zur unterstützten maximalen Zoomstufe. Größere Zoomwerte entsprechen einer höheren Auflösung.
HTML-Attribut
  • <gmp-map zoom="number"></gmp-map>
control-block-end-inline-center
Platziert das Element mit dem Slot an der Position ControlPosition.BLOCK_END_INLINE_CENTER.
control-block-end-inline-end
Platziert das Element mit dem Slot an der Position ControlPosition.BLOCK_END_INLINE_END.
control-block-end-inline-start
Platziert das Element mit dem Slot an der Position ControlPosition.BLOCK_END_INLINE_START.
control-block-start-inline-center
Platziert das Element mit dem Slot an der Position ControlPosition.BLOCK_START_INLINE_CENTER.
control-block-start-inline-end
Platziert das Element mit dem Slot an der Position ControlPosition.BLOCK_START_INLINE_END.
control-block-start-inline-start
Platziert das Element mit dem Slot an der Position ControlPosition.BLOCK_START_INLINE_START.
control-inline-end-block-center
Platziert das Element mit dem Slot an der Position ControlPosition.INLINE_END_BLOCK_CENTER.
control-inline-end-block-end
Platziert das Element mit dem Slot an der Position ControlPosition.INLINE_END_BLOCK_END.
control-inline-end-block-start
Platziert das Element mit dem Slot an der Position ControlPosition.INLINE_END_BLOCK_START.
control-inline-start-block-center
Platziert das Element mit dem Slot an der Position ControlPosition.INLINE_START_BLOCK_CENTER.
control-inline-start-block-end
Platziert das Element mit dem Slot an der Position ControlPosition.INLINE_START_BLOCK_END.
control-inline-start-block-start
Platziert das Element mit dem Slot an der Position ControlPosition.INLINE_START_BLOCK_START.
default
Sie können mithilfe von benutzerdefinierten Elementen wiederverwendbare Komponenten für die Maps JavaScript Web Components wie AdvancedMarkerElement erstellen. Standardmäßig werden alle benutzerdefinierten Elemente, die direkt MapElement hinzugefügt werden, in MapPanes.overlayMouseTarget platziert und gerendert. Die Web Components der Maps JavaScript API können jedoch in die internen Slots von MapElement verschoben werden.
BetaaddEventListener
addEventListener(type, listener[, options])
Parameter:
  • type:  string Ein String, der den Ereignistyp darstellt, auf den gewartet werden soll. Die Groß-/Kleinschreibung muss beachtet werden.
  • listener:  EventListener|EventListenerObject Das Objekt, das eine Benachrichtigung erhält. Dies muss eine Funktion oder ein Objekt mit der Methode „handleEvent“ sein.
  • options:  boolean|AddEventListenerOptions optional Optionen Benutzerdefinierte Ereignisse unterstützen nur capture und passive.
Rückgabewert:void
Richtet eine Funktion ein, die aufgerufen wird, wenn das angegebene Ereignis an das Ziel gesendet wird. Siehe addEventListener.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parameter:
Rückgabewert:void
Entfernt einen Event-Listener, der zuvor mit addEventListener für das Ziel registriert wurde. Siehe removeEventListener.
gmp-zoomchange
function(event)
Argumente: 
Dieses Ereignis wird ausgelöst, wenn sich die Eigenschaft "Zoom" der Karte ändert.

MapElementOptions-Schnittstelle

google.maps.MapElementOptions-Schnittstelle

MapElementOptions-Objekt zum Definieren der Eigenschaften, die für ein MapElement festgelegt werden können.
center optional
Typ:LatLng|LatLngLiteral optional
MapElement.center ansehen.
headingInteractionDisabled optional
Typ:boolean optional
MapElement.headingInteractionDisabled ansehen.
internalUsageAttributionIds optional
Typ:Iterable<string> optional
MapElement.internalUsageAttributionIds ansehen.
mapId optional
Typ:string optional
MapElement.mapId ansehen.
renderingType optional
Typ:RenderingType optional
MapElement.renderingType ansehen.
tiltInteractionDisabled optional
Typ:boolean optional
MapElement.tiltInteractionDisabled ansehen.
zoom optional
Typ:number optional
MapElement.zoom ansehen.

Klasse ZoomChangeEvent

google.maps.ZoomChangeEvent Klasse

Dieses Ereignis wird durch die Überwachung von Zoom-Änderungen erstellt.

Diese Klasse erweitert Event.

Zugriff durch Anrufen von const {ZoomChangeEvent} = await google.maps.importLibrary("maps").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.

Klasse Map

google.maps.Map Klasse

Diese Klasse erweitert MVCObject.

Zugriff durch Anrufen von const {Map} = await google.maps.importLibrary("maps").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
Map
Map(mapDiv[, opts])
Parameter:
  • mapDiv:  HTMLElement Die Karte wird so gerendert, dass sie dieses Element ausfüllt.
  • opts:  MapOptions optional Optionen
Erstellt eine neue Karte innerhalb des angegebenen HTML-Containers, in der Regel ein DIV-Element.
DEMO_MAP_ID Karten-ID, die für Codebeispiele verwendet werden kann, für die eine Karten-ID erforderlich ist. Diese Karten-ID ist nicht für die Verwendung in Produktionsanwendungen vorgesehen und kann nicht für Funktionen verwendet werden, die eine Cloud-Konfiguration erfordern (z. B. Cloud-Styling).
controls
Fügt der Karte zusätzliche Steuerelemente hinzu. Wenn Sie der Karte ein Steuerelement hinzufügen möchten, fügen Sie das <div> des Steuerelements dem MVCArray hinzu, das dem ControlPosition entspricht, in dem es gerendert werden soll.
data
Typ:Data
Eine Instanz von Data, die an die Karte gebunden ist. Fügen Sie diesem Data-Objekt Elemente hinzu, um sie auf dieser Karte darzustellen.
mapTypes
Eine Registrierung von MapType-Instanzen nach String-ID.
overlayMapTypes
Typ:MVCArray<MapType optional>
Zusätzliche Kartentypen für Overlays. Overlay-Kartentypen werden über der Basiskarte angezeigt, der sie zugeordnet sind, und zwar in der Reihenfolge, in der sie im overlayMapTypes-Array erscheinen. Overlays mit höheren Indexwerten werden vor Overlays mit niedrigeren Indexwerten angezeigt.
fitBounds
fitBounds(bounds[, padding])
Parameter:
  • bounds:  LatLngBounds|LatLngBoundsLiteral anzuzeigende Grenzen.
  • padding:  number|Padding optional Abstand in Pixeln. Die Begrenzungen werden an den Teil der Karte angepasst, der nach dem Entfernen des Abstands übrig bleibt. Ein numerischer Wert führt zu demselben Abstand auf allen vier Seiten. Geben Sie hier 0 an, damit „fitBounds“ für das Ergebnis von „getBounds“ idempotent ist.
Rückgabewert:Keiner
Legt fest, dass die angegebenen Grenzen für den Darstellungsbereich gelten.
Hinweis:Wenn die Karte auf display: none festgelegt ist, wird die Größe der Karte von der Funktion fitBounds als 0 × 0 gelesen. Daher wird nichts ausgeführt. Wenn Sie den Darstellungsbereich ändern möchten, während die Karte ausgeblendet ist, legen Sie die Karte auf visibility: hidden fest. So wird dafür gesorgt, dass das „div“-Element der Karte eine tatsächliche Größe hat. Bei Vektorkarten werden mit dieser Methode die Neigung und Ausrichtung der Karte auf die Standardwerte 0 gesetzt. Wenn Sie diese Methode aufrufen, kann es zu einer flüssigen Animation kommen, da die Karte geschwenkt und gezoomt wird, um die Grenzen zu berücksichtigen. Ob diese Methode animiert wird, hängt von einer internen Heuristik ab.
getBounds
getBounds()
Parameter:Keine
Rückgabewert:LatLngBounds|undefined Die Breiten-/Längengradgrenzen des aktuellen Darstellungsbereichs.
Gibt die Breite-/Länge-Grenzen des aktuellen Darstellungsbereichs zurück. Wenn mehr als eine Kopie der Welt sichtbar ist, liegt der Bereich der Grenzen im Längengrad zwischen -180 und 180 Grad (einschließlich). Wenn die Karte noch nicht initialisiert wurde oder die Mitte und der Zoom nicht festgelegt wurden, ist das Ergebnis undefined. Bei Vektorkarten mit einer Neigung oder einem Kurs ungleich null stellen die zurückgegebenen Breiten-/Längengradgrenzen den kleinsten Begrenzungsrahmen dar, der den sichtbaren Bereich des Darstellungsbereichs der Karte enthält. Unter