Questa pagina è stata tradotta dall'API Cloud Translation.

Visualizzazione: mappa geografica

Panoramica
Esempi
Caricamento in corso…
Formato dei dati
Opzioni di configurazione
Metodi
Eventi
Norme sui dati
Notes

Panoramica

Una mappa geografica è una mappa di un paese, un continente o una regione con colori e valori assegnati a regioni specifiche. I valori vengono visualizzati come scala di colori e puoi specificare un testo di passaggio del mouse facoltativo per le regioni. La mappa viene visualizzata nel browser utilizzando un Flash player incorporato. Tieni presente che la mappa non è scorrevole o trascinabile, ma può essere configurata per consentire lo zoom.

Esempi

Ecco due esempi: uno che utilizza lo stile di visualizzazione delle regioni e un altro che utilizza lo stile di visualizzazione degli indicatori.

Esempio di regioni

Lo stile delle regioni riempie intere regioni (di solito paesi) con colori corrispondenti ai valori che assegni. Specifica lo stile delle regioni assegnando options['dataMode'] = 'regions' nel codice.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geomap'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawMap);

      function drawMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};
        options['dataMode'] = 'regions';

        var container = document.getElementById('regions_div');
        var geomap = new google.visualization.GeoMap(container);

        geomap.draw(data, options);
      };
    </script>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Esempio di indicatori

Lo stile degli "indicatori" mostra un cerchio, di dimensioni e colori per indicare un valore, sopra le regioni specificate.

<html>
<head>
  <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
  <script type='text/javascript'>
   google.charts.load('current', {'packages': ['geomap']});
   google.charts.setOnLoadCallback(drawMap);

    function drawMap() {
      var data = google.visualization.arrayToDataTable([
        ['City', 'Popularity'],
        ['New York', 200],
        ['Boston', 300],
        ['Miami', 400],
        ['Chicago', 500],
        ['Los Angeles', 600],
        ['Houston', 700]
      ]);

      var options = {};
      options['region'] = 'US';
      options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
      options['dataMode'] = 'markers';

      var container = document.getElementById('map_canvas');
      var geomap = new google.visualization.GeoMap(container);
      geomap.draw(data, options);
    };

  </script>
</head>

<body>
    <div id='map_canvas'></div>
</body>

</html>

Caricamento in corso...

Il nome del pacchetto google.charts.load è "geomap"

  google.charts.load('current', {'packages': ['geomap']});

Il nome della classe di visualizzazione della mappa geografica è google.visualization.GeoMap

  var visualization = new google.visualization.GeoMap(container);

Formato dei dati

Sono supportati due formati di indirizzo, ognuno dei quali supporta un numero diverso di colonne e tipi di dati diversi per ogni colonna. Tutti gli indirizzi nella tabella devono utilizzare l'uno o l'altro; non è possibile combinare i tipi.

Formato 1: posizioni di latitudine/longitudine. Questo formato funziona solo quando l'opzione dataMode è "Indicatori". Se viene utilizzato questo formato, non è necessario includere il codice JavaScript di Google Maps. La località viene inserita in due colonne, più due colonne facoltative:
1. [Numero, obbligatorio] La latitudine. I numeri positivi sono il nord, i numeri negativi sono il sud.
2. [Numero, obbligatorio] Una longitudine. I numeri positivi sono orientati all'est, mentre i numeri negativi si trovano all'ovest.
3. [Numero, facoltativo] Un valore numerico visualizzato quando l'utente passa il mouse sopra questa regione. Se viene utilizzata la colonna 4, questa è obbligatoria.
4. [Stringa, facoltativo] Testo aggiuntivo della stringa visualizzato quando l'utente passa il mouse sopra questa regione.
Formato 2: indirizzo, nome del paese, località dei nomi delle regioni o prefissi metropolitani degli Stati Uniti. Questo formato funziona se l'opzione dataMode è impostata su "indicatori" o "regioni". La località viene inserita in una colonna, più due colonne facoltative:
1. [Stringa, obbligatoria] Una posizione sulla mappa. Sono accettati i seguenti formati:
  - Un indirizzo specifico (ad esempio, "Via Roma 160").
  - Il nome di un paese sotto forma di stringa (ad esempio "Inghilterra"), o un codice ISO-3166 in maiuscolo o l'equivalente testuale in inglese (ad esempio, "GB" o "Regno Unito").
  - Un nome in codice regione ISO-3166-2 in maiuscolo o il suo equivalente in inglese (ad esempio, "US-NJ" o "New Jersey"). Nota: le regioni possono essere specificate solo quando l'opzione dataMode è impostata su "regions".
  - Un prefisso metropolitano. Si tratta di codici metropolitani a tre cifre utilizzati per designare varie regioni. Sono supportati solo i codici per gli Stati Uniti. Tieni presente che non corrispondono ai prefissi telefonici.
2. [Numero, facoltativo] Un valore numerico visualizzato quando l'utente passa il mouse sopra questa regione. Se viene utilizzata la colonna 3, questa è obbligatoria.
3. [Stringa, facoltativo] Testo aggiuntivo della stringa visualizzato quando l'utente passa il mouse sopra questa regione.

Nota: una mappa può visualizzare un massimo di 400 voci; se la tabella DataTable o DataView contiene più di 400 righe, verranno mostrate solo le prime 400. Le modalità più veloci sono dataMode='regions' con località specificate come codici ISO e dataMode='markers' con entità di latitudine/longitudine. La modalità più lenta è dataMode='markers' con un indirizzo stringa.

Importante: DataTable deve includere tutte le colonne facoltative che precedono le colonne da utilizzare. Ad esempio, se vuoi specificare una tabella di latitudine/longitudine e vuoi utilizzare solo le colonne 1, 2 e 4, DataTable deve comunque definire la colonna 3 (anche se non è necessario aggiungere valori):

dataTable = new google.visualization.DataTable();
dataTable.addRows(1);
dataTable.addColumn('number', 'LATITUDE', 'Latitude');
dataTable.addColumn('number', 'LONGITUDE', 'Longitude');
dataTable.addColumn('number', 'VALUE', 'Value'); // Won't use this column, but still must define it.
dataTable.addColumn('string', 'HOVER', 'HoverText');

dataTable.setValue(0,0,47.00);
dataTable.setValue(0,1,-122.00);
dataTable.setValue(0,3,"Hello World!");

Opzioni di configurazione

Nome	Tipo	Predefinita	Descrizione
`region`	stringa	'world'	L'area da visualizzare sulla mappa. Verranno visualizzate anche le aree circostanti. Può essere un codice paese (in formato ISO-3166 in maiuscolo) o una delle seguenti stringhe: `world` - (tutto il mondo) `us_metro` - (Stati Uniti, aree metropolitane) `005` - (Sud America) `013` (America Centrale) `021` - (Nord America) `002` - (Tutta l'Africa) `017` (Africa centrale) `015` - (Africa settentrionale) `018` - (Africa meridionale) `030` - (Asia orientale) `034` - (Asia meridionale) `035` - (regione Asia/Pacifico) `009` - (Oceania) `145` - (Medio Oriente) `143` (Asia centrale) `151` - (Asia settentrionale) `154` - (Europa settentrionale) `155` - (Europa occidentale) `039` - (Europa meridionale) La mappa geografica non consente il comportamento di scorrimento o trascinamento, ma solo un comportamento di zoom limitato. Per attivare lo zoom indietro di base, imposta la proprietà `showZoomOut`.
`dataMode`	stringa	"regioni"	Come visualizzare i valori sulla mappa. Sono supportati due valori: `regions`: consente di colorare un'intera regione con il colore appropriato. Questa opzione non può essere utilizzata con indirizzi di latitudine/longitudine. Consulta la sezione Esempio di regioni. `markers`: mostra un punto su un'area, con il colore e la dimensione che indicano il valore. Vedi Esempio di indicatori.
`width`	stringa	"556 px"	Larghezza della visualizzazione. Se non vengono indicate unità, l'unità predefinita è in pixel.
`height`	stringa	"347px"	Altezza della visualizzazione. Se non vengono indicate unità, l'unità predefinita è in pixel.
`colors`	Array di numeri RGB nel formato 0xRRGGBB	[0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114]	Gradiente di colore da assegnare ai valori nella visualizzazione. Devi avere almeno due valori. Il gradiente includerà tutti i valori, oltre ai valori intermedi calcolati, con il colore più chiaro come valore più basso e il colore più scuro come valore più alto.
`showLegend`	boolean	true	Se il valore è true, viene visualizzata una legenda per la mappa.
`showZoomOut`	boolean	false	Se impostato su true, viene visualizzato un pulsante con l'etichetta specificata dalla proprietà `zoomOutLabel`. Tieni presente che questo pulsante non produce alcun effetto quando viene selezionato, ma genera l'evento `zoomOut`. Per gestire lo zoom, rileva questo evento e modifica l'opzione `region`. Puoi specificare `showZoomOut` solo se l'opzione `region` è più piccola della visualizzazione del mondo. Un modo per attivare lo zoom in avanti consiste nell'ascoltare l'evento `regionClick`, modificare la proprietà `region` nella regione appropriata e ricaricare la mappa.
`zoomOutLabel`	stringa	"Zoom indietro"	Etichetta per il pulsante di zoom.

Metodi

Metodo	Tipo restituito	Descrizione
`draw(data, options)`	Nessun valore	Disegna la mappa. Può tornare indietro prima del termine del disegno (vedi l'evento `drawingDone()`).
`getSelection()`	Array di elementi di selezione	Implementazione standard di `getSelection()`. Gli elementi selezionati sono righe. Questo metodo funziona solo quando l'opzione `dataMode` è "regioni". Puoi selezionare solo una regione con un valore assegnato.
`setSelection(selection)`	Nessun valore	Implementazione standard di `setSelection()`. Tratta una selezione come una selezione di righe e supporta più selezioni di righe. È possibile selezionare solo le regioni con valori assegnati.

Eventi

Nome	Descrizione	Proprietà
`error`	Attivato quando si verifica un errore durante il tentativo di rendering del grafico.	id, messaggio
`select`	Attivato quando l'utente fa clic su una regione con un valore assegnato. Per sapere quali elementi sono stati selezionati, chiama `getSelection()`. Disponibile solo quando l'opzione `dataMode` è impostata su "regioni". Nota: a causa di alcune limitazioni, l'evento `select` non viene generato se accedi alla pagina nel browser come file (ad es. "file://") anziché da un server (ad es. "http://www").	Nessun valore
`regionClick`	Richiamato quando si fa clic su una regione. Funziona sia per "regioni" che per "indicatori" `dataMode`. Tuttavia, in modalità indicatore, non verrà lanciato per il paese specifico assegnato nell'opzione "Regione" (se è stato elencato un paese specifico). Nota: a causa di alcune limitazioni, l'evento `regionClick` non viene generato se accedi alla pagina nel browser come file (ad es. "file://") anziché da un server (ad es. "http://www").	Un oggetto con una singola proprietà, `region`, ovvero una stringa in formato ISO-3166 che descrive la regione selezionata.
`zoomOut`	Richiamato quando si fa clic sul pulsante di zoom indietro. Per gestire lo zoom, rileva questo evento e modifica l'opzione `region`. Nota: a causa di alcune limitazioni, l'evento `zoomOut` non viene generato se accedi alla pagina nel browser come file (ad es. "file://") anziché da un server (ad es. "http://www").	Nessun valore
`drawingDone`	Richiamato quando la mappa geografica ha terminato di tracciare la mappa.	Nessun valore

Norme sui dati

Le località vengono geocodificate da Google Maps. Tutti i dati che non richiedono la geocodifica non vengono inviati ad alcun server. Per ulteriori informazioni sulle norme relative ai dati, consulta i Termini di servizio di Google Maps.

Note

A causa delle impostazioni di sicurezza di Flash, questa visualizzazione (e tutte le visualizzazioni basate su Flash) potrebbe non funzionare correttamente se vi si accede dalla posizione di un file nel browser (ad es. file:///c:/webhost/myhost/myviz.html) anziché dall'URL di un server web (ad es. http://www.myhost.com/myviz.html). In genere si tratta solo di un problema di test. Puoi risolvere questo problema come descritto sul sito web di Macromedia.