Questo tutorial mostra come aggiungere una mappa con stili personalizzati ad Android dell'app. Il tutorial utilizza la modalità notturna come esempio di stili personalizzati.
Con le opzioni di stile puoi personalizzare la presentazione della mappa standard di Google modificando la visualizzazione visiva di elementi quali strade, parchi, attività e altri punti di interesse. Ciò significa che puoi enfatizzare particolari componenti della mappa o adattarla allo stile del tuo dell'app.
Gli stili funzionano solo sul tipo di mappa normal
. Lo stile non influisce sulle
mappe indoor.
Ottieni il codice
Clona o scarica il repository di esempi dell'API Google Maps per Android v2 da GitHub.
Configura il progetto di sviluppo
Segui questi passaggi per creare il progetto tutorial in Android Studio.
- Scarica e installa Android Studio.
- Aggiungere il pacchetto Google Play Services ad Android Studio.
- Clona o scarica il repository di esempi dell'API Google Maps per Android v2 se non l'hai fatto quando hai iniziato a leggere il tutorial.
Importa il progetto del tutorial:
- In Android Studio, seleziona File > Nuovo > Importa progetto.
- Vai alla posizione in cui hai salvato gli esempi della versione 2 dell'API Google Maps per Android repository dopo averlo scaricato.
- Trova il progetto StyledMap in questa posizione:
PATH-TO-SAVED-REPO/android-samples/tutorials/StyledMap
- Seleziona la directory del progetto e poi fai clic su OK. Android Studio ora genera del tuo progetto utilizzando lo strumento di creazione Gradle.
Ottenere una chiave API e abilitare le API necessarie
Per completare questo tutorial, devi disporre di una chiave API Google autorizzata all'utilizzo dell'SDK Maps per Android.
Fai clic sul pulsante di seguito per ottenere una chiave e attivare l'API.
Per maggiori dettagli, consulta la guida Ottenere una chiave API.
Aggiungi la chiave API all'app
- Modifica il file
gradle.properties
del progetto. Incolla la chiave API nel valore della proprietà
GOOGLE_MAPS_API_KEY
. Quando di creare la tua app, Gradle copia la chiave API del file manifest.GOOGLE_MAPS_API_KEY=PASTE-YOUR-API-KEY-HERE
Crea ed esegui la tua app
- Collega un dispositivo Android al computer. Segui le istruzioni per attivare le opzioni sviluppatore sul tuo dispositivo Android e configurare il sistema in modo che rilevi il dispositivo. In alternativa, puoi utilizzare Gestione AVD (Android Virtual Device) per configurare un dispositivo virtuale. Quando scegli un emulatore, assicurati di scegliere un'immagine che includa le API di Google. Per maggiori dettagli, consulta la guida introduttiva.
- In Android Studio, fai clic sull'opzione di menu Esegui (o sull'icona del pulsante di riproduzione). Scegli un dispositivo come richiesto.
Android Studio richiama Gradle per creare l'app, quindi la esegue sul dispositivo o sull'emulatore. Dovresti vedere una mappa con la modalità Buio (modalità notturna) simile all'immagine in questa pagina.
Risoluzione dei problemi:
- Se non vedi una mappa, verifica di aver ottenuto una chiave API e di averla aggiunta alla l'app, come descritto sopra. Controlla il log in Android Android Monitor di Studio per i messaggi di errore relativi alla chiave API.
- Utilizzare gli strumenti di debug di Android Studio per visualizzare i log ed eseguire il debug l'app.
comprendi il codice
Questa parte del tutorial illustra le parti più significative del StyledMap, per aiutarti a capire come creare un'app simile.
Aggiungere una risorsa contenente un oggetto di stile JSON
Aggiungi una risorsa al tuo progetto di sviluppo contenente le dichiarazioni di stile in formato JSON. Puoi utilizzare una risorsa non elaborata o una stringa, come mostrato negli esempi riportati di seguito.
Risorsa non elaborata
Definisci una risorsa non elaborata in /res/raw/style_json.json
, contenente
la dichiarazione dello stile JSON per gli stili in modalità notturna:
Risorsa stringa
Definisci una risorsa stringa in /res/values/style_strings.xml
,
contenente la dichiarazione dello stile JSON per gli stili in modalità notturna. Questo
il tutorial utilizza il nome della stringa style_json
. Nel
utilizzare una barra rovesciata per evitare le virgolette:
Trasmettere un oggetto di stile JSON alla mappa
Per applicare uno stile alla mappa, chiama GoogleMap.setMapStyle()
passando un oggetto
MapStyleOptions
contenente le dichiarazioni di stile in formato JSON.
Risorsa non elaborata
Il seguente esempio di codice presuppone che il progetto contenga una risorsa non elaborata
denominata style_json
:
// Copyright 2020 Google LLC // // Licensed under the Apache License, Version 2.0 (the "License"); // you may not use this file except in compliance with the License. // You may obtain a copy of the License at // // http://www.apache.org/licenses/LICENSE-2.0 // // Unless required by applicable law or agreed to in writing, software // distributed under the License is distributed on an "AS IS" BASIS, // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License. package com.example.styledmap; import android.content.res.Resources; import android.os.Bundle; import android.util.Log; import androidx.appcompat.app.AppCompatActivity; import com.google.android.gms.maps.CameraUpdateFactory; import com.google.android.gms.maps.GoogleMap; import com.google.android.gms.maps.OnMapReadyCallback; import com.google.android.gms.maps.SupportMapFragment; import com.google.android.gms.maps.model.LatLng; import com.google.android.gms.maps.model.MapStyleOptions; /** * A styled map using JSON styles from a raw resource. */ public class MapsActivityRaw extends AppCompatActivity implements OnMapReadyCallback { private static final String TAG = MapsActivityRaw.class.getSimpleName(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Retrieve the content view that renders the map. setContentView(R.layout.activity_maps_raw); // Get the SupportMapFragment and register for the callback // when the map is ready for use. SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager() .findFragmentById(R.id.map); mapFragment.getMapAsync(this); } /** * Manipulates the map when it's available. * The API invokes this callback when the map is ready for use. */ @Override public void onMapReady(GoogleMap googleMap) { try { // Customise the styling of the base map using a JSON object defined // in a raw resource file. boolean success = googleMap.setMapStyle( MapStyleOptions.loadRawResourceStyle( this, R.raw.style_json)); if (!success) { Log.e(TAG, "Style parsing failed."); } } catch (Resources.NotFoundException e) { Log.e(TAG, "Can't find style. Error: ", e); } // Position the map's camera near Sydney, Australia. googleMap.moveCamera(CameraUpdateFactory.newLatLng(new LatLng(-34, 151))); } }
Il layout (activity_maps_raw.xml
) ha il seguente aspetto:
Risorsa stringa
Il seguente esempio di codice presuppone che il progetto contenga una risorsa stringa
denominato style_json
:
package com.example.styledmap; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.util.Log; import com.google.android.gms.maps.CameraUpdateFactory; import com.google.android.gms.maps.GoogleMap; import com.google.android.gms.maps.OnMapReadyCallback; import com.google.android.gms.maps.SupportMapFragment; import com.google.android.gms.maps.model.LatLng; import com.google.android.gms.maps.model.MapStyleOptions; /** * A styled map using JSON styles from a string resource. */ public class MapsActivityString extends AppCompatActivity implements OnMapReadyCallback { private static final String TAG = MapsActivityString.class.getSimpleName(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Retrieve the content view that renders the map. setContentView(R.layout.activity_maps_string); // Get the SupportMapFragment and register for the callback // when the map is ready for use. SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager() .findFragmentById(R.id.map); mapFragment.getMapAsync(this); } /** * Manipulates the map when it's available. * The API invokes this callback when the map is ready for use. */ @Override public void onMapReady(GoogleMap googleMap) { // Customise the styling of the base map using a JSON object defined // in a string resource file. First create a MapStyleOptions object // from the JSON styles string, then pass this to the setMapStyle // method of the GoogleMap object. boolean success = googleMap.setMapStyle(new MapStyleOptions(getResources() .getString(R.string.style_json))); if (!success) { Log.e(TAG, "Style parsing failed."); } // Position the map's camera near Sydney, Australia. googleMap.moveCamera(CameraUpdateFactory.newLatLng(new LatLng(-34, 151))); } }
Il layout (activity_maps_string.xml
) ha il seguente aspetto:
Scopri di più sulle dichiarazioni di stile JSON
Le mappe con stili utilizzano due concetti per applicare colori e altre modifiche di stile a un mappa:
- I selettori specificano i componenti geografici che puoi stilizzare sulla mappa. Sono inclusi strade, parchi, specchi d'acqua e altro ancora, nonché le relative etichette. I selettori includono elementi
e funzionalità, specificati come proprietà
featureType
eelementType
. - Gli stilisti sono proprietà di colore e visibilità che puoi applicare agli elementi della mappa. Definiscono il colore visualizzato tramite una combinazione di valori di tonalità, colore e luminosità/gamma.
Consulta il riferimento dello stile per una descrizione dettagliata del Opzioni per gli stili JSON.
Procedura guidata per gli stili di Maps Platform
Utilizza la procedura guidata degli stili di Maps Platform come modo rapido per generare un oggetto di stile JSON. Maps SDK for Android supporta lo stesso stile come l'API Maps JavaScript.
Passaggio successivo
Scopri come nascondere gli elementi sulla mappa con l'applicazione di uno stile.