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: