Maps

Classe MapElement

google.maps.MapElement classe

MapElement è una sottoclasse di HTMLElement per il rendering delle mappe. Dopo aver caricato la libreria maps, è possibile creare una mappa in HTML. Ad esempio: 

<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>
Internamente, utilizza Map, a cui è possibile accedere con la proprietà MapElement.innerMap.

Elemento personalizzato:
<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>

Questo corso si estende HTMLElement.

Questa classe implementa MapElementOptions.

Accesso chiamando il numero const {MapElement} = await google.maps.importLibrary("maps").
Consulta Librerie nell'API Maps JavaScript.
MapElement
MapElement([options])
Parametri: 
center
Tipo:  LatLng|LatLngLiteral optional
La latitudine/longitudine del centro della mappa.
Attributo HTML:
  • <gmp-map center="lat,lng"></gmp-map>
headingInteractionDisabled
Tipo:  boolean optional
Predefinito: false
Indica se la mappa deve consentire all'utente di controllare l'orientamento (rotazione) della videocamera. Questa opzione è efficace solo quando la mappa è una mappa vettoriale. Se non è impostato nel codice, verrà utilizzata la configurazione cloud per l'ID mappa (se disponibile).
Attributo HTML:
  • <gmp-map heading-interaction-disabled></gmp-map>
innerMap
Tipo:  Map
Un riferimento a Map che MapElement utilizza internamente.
internalUsageAttributionIds
Tipo:  Iterable<string> optional
Predefinito: null
Aggiunge un ID attribuzione utilizzo all'inizializzatore, che aiuta Google a capire quali librerie ed esempi sono utili agli sviluppatori, ad esempio l'utilizzo di una libreria di clustering dei marcatori. Per disattivare l'invio dell'ID attribuzione utilizzo, puoi eliminare questa proprietà o sostituire il valore con una stringa vuota. Verranno inviati solo i valori univoci. Le modifiche a questo valore dopo l'istanza potrebbero essere ignorate.
Attributo HTML:
  • <gmp-map internal-usage-attribution-ids="id1 id2"></gmp-map>
mapId
Tipo:  string optional
L'ID mappa della mappa. Questo parametro non può essere impostato o modificato dopo l'istanza di una mappa. Map.DEMO_MAP_ID può essere utilizzato per provare funzionalità che richiedono un ID mappa, ma non l'attivazione del cloud.
Attributo HTML:
  • <gmp-map map-id="string"></gmp-map>
renderingType
Tipo:  RenderingType optional
Predefinito: RenderingType.VECTOR
Indica se la mappa deve essere una mappa raster o vettoriale. Questo parametro non può essere impostato o modificato dopo l'istanza di una mappa. Se non impostato, la configurazione cloud per l'ID mappa determinerà il tipo di rendering (se disponibile). Tieni presente che le mappe vettoriali potrebbero non essere disponibili per tutti i dispositivi e i browser e la mappa verrà ripristinata come mappa raster in base alle necessità.
Attributo HTML:
  • <gmp-map rendering-type="vector"></gmp-map>
  • <gmp-map rendering-type="raster"></gmp-map>
tiltInteractionDisabled
Tipo:  boolean optional
Predefinito: false
Indica se la mappa deve consentire il controllo dell'inclinazione della videocamera da parte dell'utente. Questa opzione è efficace solo quando la mappa è una mappa vettoriale. Se non è impostato nel codice, verrà utilizzata la configurazione cloud per l'ID mappa (se disponibile).
Attributo HTML:
  • <gmp-map tilt-interaction-disabled></gmp-map>
zoom
Tipo:  number optional
Il livello di zoom della mappa. I valori di zoom validi sono numeri da zero fino al livello di zoom massimo supportato. Valori di zoom più elevati corrispondono a una risoluzione maggiore.
Attributo HTML:
  • <gmp-map zoom="number"></gmp-map>
control-block-end-inline-center
Posiziona l'elemento inserito nella posizione ControlPosition.BLOCK_END_INLINE_CENTER.
control-block-end-inline-end
Posiziona l'elemento inserito nella posizione ControlPosition.BLOCK_END_INLINE_END.
control-block-end-inline-start
Posiziona l'elemento inserito nella posizione ControlPosition.BLOCK_END_INLINE_START.
control-block-start-inline-center
Posiziona l'elemento inserito nella posizione ControlPosition.BLOCK_START_INLINE_CENTER.
control-block-start-inline-end
Posiziona l'elemento inserito nella posizione ControlPosition.BLOCK_START_INLINE_END.
control-block-start-inline-start
Posiziona l'elemento inserito nella posizione ControlPosition.BLOCK_START_INLINE_START.
control-inline-end-block-center
Posiziona l'elemento inserito nella posizione ControlPosition.INLINE_END_BLOCK_CENTER.
control-inline-end-block-end
Posiziona l'elemento inserito nella posizione ControlPosition.INLINE_END_BLOCK_END.
control-inline-end-block-start
Posiziona l'elemento inserito nella posizione ControlPosition.INLINE_END_BLOCK_START.
control-inline-start-block-center
Posiziona l'elemento inserito nella posizione ControlPosition.INLINE_START_BLOCK_CENTER.
control-inline-start-block-end
Posiziona l'elemento inserito nella posizione ControlPosition.INLINE_START_BLOCK_END.
control-inline-start-block-start
Posiziona l'elemento inserito nella posizione ControlPosition.INLINE_START_BLOCK_START.
default
Puoi creare componenti riutilizzabili intorno ai componenti web JavaScript di Maps, come AdvancedMarkerElement, utilizzando elementi personalizzati. Per impostazione predefinita, tutti gli elementi personalizzati aggiunti direttamente a MapElement verranno inseriti e visualizzati in MapPanes.overlayMouseTarget. Tuttavia, i componenti web dell'API Maps JavaScript possono essere riassegnati agli slot interni di MapElement.
BetaaddEventListener
addEventListener(type, listener[, options])
Parametri: 
  • type:  string una stringa sensibile alle maiuscole e minuscole che rappresenta il tipo di evento da ascoltare.
  • listener:  EventListener|EventListenerObject l'oggetto che riceve una notifica. Deve essere una funzione o un oggetto con il metodo handleEvent
  • options:  boolean|AddEventListenerOptions optional vedi le opzioni. Gli eventi personalizzati supportano solo capture e passive.
Valore restituito:  void
Configura una funzione che verrà chiamata ogni volta che l'evento specificato viene inviato alla destinazione. Vedi addEventListener.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parametri: 
  • type:  string una stringa che specifica il tipo di evento per cui rimuovere un listener di eventi.
  • listener:  EventListener|EventListenerObject Il listener di eventi del gestore di eventi da rimuovere dalla destinazione dell'evento.
  • options:  boolean|EventListenerOptions optional vedi le opzioni.
Valore restituito:  void
Rimuove dal target un listener di eventi registrato in precedenza con addEventListener. Vedi removeEventListener.
gmp-zoomchange
function(event)
Argomenti: 
Questo evento viene attivato quando cambia la proprietà di zoom della mappa.

MapElementOptions

google.maps.MapElementOptions interfaccia

Oggetto MapElementOptions utilizzato per definire le proprietà che possono essere impostate su un MapElement.
center optional
Tipo:  LatLng|LatLngLiteral optional
Leggi i MapElement.center.
headingInteractionDisabled optional
Tipo:  boolean optional
Leggi i MapElement.headingInteractionDisabled.
internalUsageAttributionIds optional
Tipo:  Iterable<string> optional
Leggi i MapElement.internalUsageAttributionIds.
mapId optional
Tipo:  string optional
Leggi i MapElement.mapId.
renderingType optional
Tipo:  RenderingType optional
Leggi i MapElement.renderingType.
tiltInteractionDisabled optional
Tipo:  boolean optional
Leggi i MapElement.tiltInteractionDisabled.
zoom optional
Tipo:  number optional
Leggi i MapElement.zoom.

ZoomChangeEvent class

google.maps.ZoomChangeEvent classe

Questo evento viene creato dalla modifica dello zoom del monitoraggio.

Questo corso si estende Event.

Accesso chiamando il numero const {ZoomChangeEvent} = await google.maps.importLibrary("maps").
Consulta Librerie nell'API Maps JavaScript.

Classe Map

google.maps.Map classe

Questo corso si estende MVCObject.

Accesso chiamando il numero const {Map} = await google.maps.importLibrary("maps").
Consulta Librerie nell'API Maps JavaScript.
Map
Map(mapDiv[, opts])
Parametri: 
  • mapDiv:  HTMLElement La mappa verrà visualizzata per riempire questo elemento.
  • opts:  MapOptions optional Opzioni
Crea una nuova mappa all'interno del contenitore HTML specificato, che in genere è un elemento DIV.
DEMO_MAP_ID ID mappa che può essere utilizzato per gli esempi di codice che richiedono un ID mappa. Questo ID mappa non è destinato all'uso in applicazioni di produzione e non può essere utilizzato per funzionalità che richiedono la configurazione cloud (come la personalizzazione basata su cloud).
controls
Controlli aggiuntivi da allegare alla mappa. Per aggiungere un controllo alla mappa, aggiungi il <div> del controllo al MVCArray corrispondente al ControlPosition in cui deve essere visualizzato.
data
Tipo:  Data
Un'istanza di Data, associata alla mappa. Aggiungi funzionalità a questo oggetto Data per visualizzarle comodamente su questa mappa.
mapTypes
Un registro delle istanze MapType per ID stringa.
overlayMapTypes
Tipo:  MVCArray<MapType optional>
Tipi di mappe aggiuntivi da sovrapporre. I tipi di mappe in overlay vengono visualizzati sopra la mappa di base a cui sono collegati, nell'ordine in cui appaiono nell'array overlayMapTypes (gli overlay con valori di indice più alti vengono visualizzati davanti a quelli con valori di indice più bassi).
fitBounds
fitBounds(bounds[, padding])
Parametri: 
  • bounds:  LatLngBounds|LatLngBoundsLiteral limiti da mostrare.
  • padding:  number|Padding optional Spaziatura interna in pixel. I limiti verranno adattati alla parte della mappa che rimane dopo la rimozione del padding. Un valore numerico produrrà la stessa spaziatura interna su tutti e quattro i lati. Fornisci 0 qui per rendere fitBounds idempotente sul risultato di getBounds.
Valore restituito:nessuno
Imposta l'area visibile in modo che contenga i limiti specificati.
Nota:quando la mappa è impostata su display: none, la funzione fitBounds legge le dimensioni della mappa come 0x0 e pertanto non esegue alcuna operazione. Per modificare l'area visibile mentre la mappa è nascosta, imposta la mappa su visibility: hidden, in modo che il div della mappa abbia una dimensione effettiva. Per le mappe vettoriali, questo metodo imposta l'inclinazione e la direzione della mappa sui valori predefiniti pari a zero. La chiamata a questo metodo può causare un'animazione fluida mentre la mappa si sposta e si ingrandisce per adattarsi ai limiti. L'animazione di questo metodo dipende da un'euristica interna.
getBounds
getBounds()
Parametri: nessuno
Valore restituito:LatLngBounds|undefined i limiti di latitudine/longitudine dell'area visibile corrente.
Restituisce i limiti di latitudine/longitudine del viewport corrente. Se è visibile più di una copia del mondo, l'intervallo dei limiti in longitudine va da -180 a 180 gradi inclusi. Se la mappa non è ancora stata inizializzata o il centro e lo zoom non sono stati impostati, il risultato è undefined. Per le mappe vettoriali con inclinazione o direzione diverse da zero, i limiti di latitudine/longitudine restituiti rappresentano il più piccolo rettangolo di selezione che include la regione visibile del riquadro della mappa. Consulta MapCanvasProjection.getVisibleRegion per ottenere la regione visibile esatta dell'area visibile della mappa.
getCenter
getCenter()
Parametri: nessuno
Valore restituito:  LatLng|undefined
Restituisce la posizione visualizzata al centro della mappa. Tieni presente che questo oggetto LatLng non è sottoposto a wrapping. Consulta la pagina