Riferimento stile per l'API Maps JavaScript

Con le opzioni di stile puoi personalizzare la presentazione dei stili di mappa, cambiando la visualizzazione visiva di elementi quali strade, parchi attività commerciali e altri punti d'interesse. Oltre a cambiare lo stile puoi nasconderli del tutto. Ciò significa che puoi enfatizza determinati componenti della mappa o fai in modo che la mappa completi lo stile della pagina circostante.

Esempi

La seguente dichiarazione di stile JSON trasforma in grigio tutte le funzionalità della mappa, quindi colora la geometria arteriosa delle strade in blu e nasconde le etichette dei paesaggi completamente:

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

L'oggetto JSON

Una dichiarazione di stile JSON è composta dai seguenti elementi:

• featureType (facoltativo): le caratteristiche da selezionare per questa modifica dello stile. Le caratteristiche sono caratteristiche geografiche come strade, parchi, specchi d'acqua e altro ancora. Se non specifichi una caratteristica, tutte le caratteristiche sono selezionate.
• elementType (facoltativo). La proprietà del parametro la caratteristica specificata da selezionare. Gli elementi sono sottoparti di un elemento, tra cui: etichette e geometria. Se non specifichi nessun elemento, tutti gli elementi del sono selezionate.
• styler: le regole da applicare alle caratteristiche e elementi. I stilisti indicano il colore, la visibilità e il peso della caratteristica. Puoi applicare uno o più stilisti a una caratteristica.

Per specificare uno stile, devi combinare un insieme di featureType e Selettori elementType e stylers in uno stile un array di dati. In un singolo array puoi scegliere come target qualsiasi combinazione di caratteristiche. Tuttavia, il numero di stili che puoi applicare contemporaneamente è limitato. Se il tuo stile l'array supera il numero massimo di caratteri, non viene applicato nessuno stile.

Il resto della pagina contiene ulteriori informazioni su funzionalità, elementi e stilisti.

featureType

Il seguente snippet JSON seleziona tutte le strade sulla mappa:

{
  "featureType": "road"
}

Le caratteristiche, o tipi di elementi, sono caratteristiche geografiche sulla mappa, tra cui strade, parchi, specchi d'acqua, attività e altro ancora.

Le caratteristiche formano una struttura di categorie, con all come radice. Se non specifichi una caratteristica, vengono selezionate tutte le caratteristiche. Specificare una caratteristica di all ha lo stesso effetto.

Alcune funzionalità contengono elementi secondari che specifichi utilizzando un punto la notazione. Ad esempio, landscape.natural o road.local. Se specifichi solo la caratteristica principale, ad esempio road, gli stili specificati per l'elemento principale si applicano a tutti i relativi figli, ad esempio road.local e road.highway.

Tieni presente che le funzionalità principali possono includere alcuni elementi non inclusi in tutte le caratteristiche figlio.

Sono disponibili le seguenti funzionalità:

• all (predefinito) seleziona tutte le funzionalità.
• administrative seleziona tutte le aree amministrative. Stile interessa solo le etichette delle aree amministrative, non bordi o riempimento.
  • administrative.country seleziona i paesi.
  • administrative.land_parcel seleziona lotti di terreno.
  • administrative.locality seleziona le località.
  • administrative.neighborhood seleziona i quartieri.
  • administrative.province seleziona province.
• landscape seleziona tutti i paesaggi.
  • landscape.man_made seleziona elementi artificiali, come edifici e altri strutture.
  • landscape.natural seleziona elementi naturali, come montagne, fiumi deserti e ghiacciai.
  • landscape.natural.landcover seleziona le caratteristiche di copertura del suolo, il materiale fisico che copre la superficie terrestre, come foreste, praterie, paludi e terra nuda.
  • landscape.natural.terrain seleziona elementi del terreno di una superficie del suolo, come altitudine, pendenza e orientamento.
• poi seleziona tutti i punti d'interesse.
  • poi.attraction seleziona le attrazioni turistiche.
  • poi.business seleziona le attività.
  • poi.government seleziona gli edifici governativi.
  • poi.medical seleziona i servizi di emergenza, tra cui ospedali, farmacie, polizia, medici e altri ancora.
  • poi.park seleziona i parchi.
  • poi.place_of_worship seleziona i luoghi di culto, tra cui chiese, templi, moschee e altro ancora.
  • poi.school seleziona le scuole.
  • poi.sports_complex seleziona complessi sportivi
• road seleziona tutte le strade.
  • road.arterial seleziona le arterie stradali.
  • road.highway seleziona le autostrade.
  • road.highway.controlled_access seleziona autostrade con un accesso controllato.
  • road.local seleziona le strade locali.
• transit seleziona tutte le stazioni e le linee di trasporto pubblico.
  • transit.line seleziona le linee di trasporto pubblico.
  • transit.station seleziona tutte le stazioni di trasporto pubblico.
  • transit.station.airport seleziona gli aeroporti.
  • transit.station.bus seleziona le fermate dell'autobus.
  • transit.station.rail seleziona le stazioni ferroviarie.
• water seleziona masse d'acqua.

elementType

Il seguente snippet JSON seleziona le etichette per tutte le strade locali:

{
  "featureType": "road.local",
  "elementType": "labels"
}

Gli elementi sono suddivisioni di un elemento. Una strada, ad esempio, è costituita dalla linea grafica (la geometria) sulla mappa e anche dal testo che ne indica il nome (un'etichetta).

Sono disponibili i seguenti elementi, ma tieni presente che una funzionalità specifica potrebbe supportare nessuno, alcuni o tutti gli elementi:

• all (predefinito) seleziona tutti gli elementi dell'elemento specificato.
• geometry seleziona tutti gli elementi geometrici dell'elemento specificato funzionalità.
  • geometry.fill seleziona solo il riempimento dell'elemento la geometria di testo.
  • geometry.stroke seleziona solo il tratto della la geometria di testo.
• labels seleziona le etichette testuali associate al una caratteristica specificata.
  • labels.icon seleziona solo l'icona visualizzata all'interno dell'elemento.
  • labels.text seleziona solo il testo dell'etichetta.
  • labels.text.fill seleziona solo il riempimento dell'etichetta. La il riempimento di un'etichetta viene in genere rappresentato da un contorno colorato che circonda il testo dell'etichetta.
  • labels.text.stroke seleziona solo il tratto dell'etichetta testo.

stylers

Gli stili sono opzioni di formattazione che puoi applicare agli elementi della mappa elementi.

Il seguente snippet JSON visualizza una funzionalità di colore verde acceso, utilizzando un Valore RGB:

"stylers": [
  { "color": "#99FF33" }
]

Questo snippet rimuove ogni intensità dal colore di un elemento, indipendentemente dal il suo colore iniziale. L'effetto è eseguire il rendering della caratteristica in scala di grigi:

"stylers": [
  { "saturation": -100 }
]

Questo snippet nasconde completamente una funzionalità:

    "stylers": [
      { "visibility": "off" }
    ]

Sono supportate le seguenti opzioni di stile:

• hue (una stringa esadecimale RGB di formato #RRGGBB) indica il colore di base.

  Nota: questa opzione imposta la tonalità mantenendo la saturazione e la luminosità specificato nello stile predefinito di Google (o in altre opzioni di stile che sulla mappa). Il colore risultante è relativo allo stile del mappa base. Se Google apporta modifiche allo stile della mappa base, le modifiche influisce sugli elementi della mappa con lo stile hue. È meglio se puoi, usa lo styler color assoluto.

• lightness (un valore con rappresentazione in virgola mobile compreso tra -100 e 100) indica la variazione percentuale di luminosità della . I valori negativi aumentano l'oscurità (dove -100 specifica il nero) mentre i valori positivi aumentano la luminosità (dove +100 specifica il bianco).

  Nota: questa opzione imposta la luminosità mantenendo la saturazione e la tonalità specificato nello stile predefinito di Google (o in altre opzioni di stile che sulla mappa). Il colore risultante è relativo allo stile del mappa base. Se Google apporta modifiche allo stile della mappa base, le modifiche influisce sugli elementi della mappa con lo stile lightness. È meglio per utilizzare lo styler color assoluto, se possibile.

• saturation (un valore con rappresentazione in virgola mobile compreso tra -100 e 100) indica la variazione percentuale di intensità il colore di base da applicare all'elemento.

  Nota: questa opzione imposta la saturazione mantenendo la tonalità e la leggerezza specificato nello stile predefinito di Google (o in altre opzioni di stile che sulla mappa). Il colore risultante è relativo allo stile del mappa base. Se Google apporta modifiche allo stile della mappa base, le modifiche influisce sugli elementi della mappa con lo stile saturation. È meglio usare lo styler color assoluto, se possibile.

• gamma (un valore con rappresentazione in virgola mobile compreso tra 0.01 e 10.0, dove 1.0 non applica alcuna correzione) indica la quantità di correzione gamma da applicare all'elemento. Correzioni gamma modificare la luminosità dei colori in modo non lineare, senza influire i valori di bianco o nero. La correzione gamma è in genere utilizzata per modificare di più elementi. Ad esempio, puoi modificare la gamma aumenta o diminuisce il contrasto tra bordi e interni elementi.

  Nota: questa opzione consente di regolare la luminosità in base al valore predefinito di utilizzando una curva gamma. Se Google apporta modifiche alla mappa base , le modifiche influiscono sugli elementi della mappa con stili gamma. È meglio utilizzare il valore assoluto color styler, se puoi.

• invert_lightness (se true) inverte la leggerezza esistente. Questo è utile, ad esempio, per velocizzare passare a una mappa più scura con testo bianco.

  Nota: questa opzione inverte semplicemente lo stile Google predefinito. Se Google apporta modifiche allo stile della mappa base, le modifiche influiscono sulla elementi in stile invert_lightness. È meglio usare lo styler color assoluto, se possibile.

• visibility (on, off o simplified) indica se e come l'elemento viene visualizzato su la mappa. Una visibilità simplified rimuove alcuni elementi di stile dalle funzionalità interessate; Le strade, ad esempio, sono semplificate in linee senza contorni, mentre i parchi perdono il testo delle etichette ma mantengono la .
• color (una stringa esadecimale RGB di formato #RRGGBB) imposta il colore dell'elemento.
• weight (un valore intero maggiore o uguale a zero) imposta il peso della caratteristica, in pixel. L'impostazione della ponderazione su un valore alto potrebbe ciò comporta un ritaglio vicino ai bordi dei riquadri.

Le regole di stile vengono applicate nell'ordine specificato. Non combinare più operazioni in un'unica operazione di stile. Definisci invece ogni come voce separata nell'array di stili.

Nota: l'ordine è importante, poiché alcune operazioni non sono commutative. Funzionalità e/o elementi che sono già stati modificati tramite operazioni di stile (di solito) hanno stili esistenti. Le operazioni agiscono sugli stili esistenti, se presenti.

Il modello di tonalità, saturazione e luminosità

Le mappe con stili utilizzano la tonalità, modello di saturazione, luminosità (HSL) per indicare il colore all'interno dello styler operazioni aziendali. Tonalità indica il colore di base, la saturazione indica l'intensità del colore, mentre la leggerità indica la quantità relativa di bianco o nero nel colore del componente.

Gamma correzione modifica la luminosità dello spazio colore, in genere per aumentare o diminuire il contrasto. Inoltre, il modello HSL definisce all'interno di uno spazio di coordinate dove hue indica l'orientamento all'interno di una ruota dei colori, mentre la saturazione e la luminosità indicano le ampiezze su assi diversi. Le tonalità vengono misurate all'interno di uno spazio colore RGB, che è simile alla maggior parte degli spazi colore RGB, tranne per le tonalità di bianco e il nero non è presente.

hue accetta un valore colore esadecimale HTML, ma utilizza solo questo valore per determinare il colore di base, ovvero il suo orientamento rispetto al colore ruota, non la sua saturazione o leggerezza, che sono indicate separatamente come variazioni percentuali.

Ad esempio, puoi definire la tonalità del verde puro come hue:0x00ff00 o hue:0x000100. Entrambe le tonalità sono identici. Entrambi i valori puntano al verde puro nel modello di colore HSL.

Una ruota dei colori RGB

Valori RGB hue composti da parti uguali rosso, verde e blu non indicano una tonalità, perché nessuno di questi valori indica un orientamento spazio di coordinate HSL. Esempi sono "#000000" (nero), "#FFFFFF" (bianco), e tutte le pure tonalità del grigio. Per indicare nero, bianco o grigio, devi rimuovi tutti i valori saturation (imposta il valore su -100) e modifica lightness.

Inoltre, quando modifichi elementi esistenti che hanno già un colore, schema, la modifica di un valore come hue non cambia quello esistente saturation o lightness.