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
mappe di interni.
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, ti serve una chiave API di Google autorizzata a utilizzare Maps SDK for Android.
Fai clic sul pulsante in basso per ottenere una chiave e attivare l'API.
Per ulteriori 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 dispositivo e configurare il sistema per il rilevamento del dispositivo. (In alternativa, puoi utilizza la Gestione dispositivi virtuali (AVD) Android per configurare una dispositivo. Quando scegli un emulatore, assicurati di scegliere un'immagine che includa le API di Google. Per ulteriori dettagli, consulta 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 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.
Aggiungi una risorsa contenente un oggetto in stile JSON
Aggiungi una risorsa al progetto di sviluppo contenente le tue dichiarazioni di stile in formato JSON. Puoi usare una risorsa non elaborata o una stringa, come mostrato negli esempi. 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
. Nella
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()
trasmettendo un
Oggetto MapStyleOptions
che contiene il tuo stile
le dichiarazioni in formato JSON.
Risorsa non elaborata
L'esempio di codice seguente presuppone che il progetto contenga una risorsa non elaborata
denominato 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 in 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
di stile sulla mappa. tra cui strade, parchi, masse d'acqua
oltre alle relative etichette. I selettori includono le caratteristiche
e elements, specificati come
featureType
eelementType
proprietà. - I Styler 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 di un oggetto con stili JSON. Maps SDK for Android supporta lo stesso stile come l'API Maps JavaScript.
Passaggio successivo
Scopri come nascondere gli elementi sulla mappa con lo stile.