Dodawanie mapy za pomocą znacznika

W tym samouczku dowiesz się, jak dodać do aplikacji na Androida mapę Google z oznacznikiem (pinezką) wskazującą konkretną lokalizację.

Aby utworzyć aplikację na Androida za pomocą pakietu SDK Maps na Androida, wykonaj instrukcje w samouczku. Zalecane środowisko programistyczne to Android Studio.

Pobierz kod

Sklonuj lub pobierz repozytorium przykładów Google Maps Android API v2 z GitHuba.

Wyświetlanie wersji aktywności w języku Java:

Pokaż / ukryj kod

    // 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.mapwithmarker;

import android.os.Bundle;
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.MarkerOptions;

/**
 * An activity that displays a Google map with a marker (pin) to indicate a particular location.
 */
public class MapsMarkerActivity extends AppCompatActivity
        implements OnMapReadyCallback {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Retrieve the content view that renders the map.
        setContentView(R.layout.activity_maps);

        // Get the SupportMapFragment and request notification when the map is ready to be used.
        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 to be used.
     * This is where we can add markers or lines, add listeners or move the camera. In this case,
     * we just add a marker near Sydney, Australia.
     * If Google Play services is not installed on the device, the user receives a prompt to install
     * Play services inside the SupportMapFragment. The API invokes this method after the user has
     * installed Google Play services and returned to the app.
     */
    @Override
    public void onMapReady(GoogleMap googleMap) {
        // Add a marker in Sydney, Australia,
        // and move the map's camera to the same location.
        LatLng sydney = new LatLng(-33.852, 151.211);
        googleMap.addMarker(new MarkerOptions()
            .position(sydney)
            .title("Marker in Sydney"));
        googleMap.moveCamera(CameraUpdateFactory.newLatLng(sydney));
    }
}
MapsMarkerActivity.java
    

Wyświetlanie wersji aktywności w języku Kotlin:

Pokaż / ukryj kod

    // 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.mapwithmarker

import android.os.Bundle
import android.widget.Toast
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.MarkerOptions

/**
 * An activity that displays a Google map with a marker (pin) to indicate a particular location.
 */
class MapsMarkerActivity : AppCompatActivity(), OnMapReadyCallback {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // Retrieve the content view that renders the map.
        setContentView(R.layout.activity_maps)

        // Get the SupportMapFragment and request notification when the map is ready to be used.
        val mapFragment = supportFragmentManager.findFragmentById(R.id.map) as? SupportMapFragment
        mapFragment?.getMapAsync(this)
    }

    override fun onMapReady(googleMap: GoogleMap) {
      val sydney = LatLng(-33.852, 151.211)
      googleMap.addMarker(
        MarkerOptions()
          .position(sydney)
          .title("Marker in Sydney")
      )
      googleMap.moveCamera(CameraUpdateFactory.newLatLng(sydney))
    }
}
MapsMarkerActivity.kt
    

Konfigurowanie projektu programistycznego

Aby utworzyć projekt samouczka w Android Studio, wykonaj te czynności.

1. Pobierz i zainstaluj Android Studio.
2. Dodaj do Android Studio pakiet Usługi Google Play.
3. Skopiuj lub pobierz repozytorium przykładów Google Maps Android API v2, jeśli nie zrobiłeś tego na początku samouczka.

4. Zaimportuj projekt samouczka:

   • W Android Studio kliknij Plik > Nowy > Importuj projekt.
   • Otwórz folder, w którym po pobraniu zapisano repozytorium przykładów Google Maps Android API v2.
   • Znajdź projekt MapWithMarker w tym miejscu:
     PATH-TO-SAVED-REPO/android-samples/tutorials/java/MapWithMarker (Java) lub
     PATH-TO-SAVED-REPO/android-samples/tutorials/kotlin/MapWithMarker (Kotlin).
   • Wybierz katalog projektu, a potem kliknij Otwórz. Android Studio kompiluje teraz projekt za pomocą narzędzia do kompilowania Gradle.

Włączanie niezbędnych interfejsów API i uzyskiwanie klucza API

Aby wykonać ten samouczek, musisz mieć projekt Google Cloud z włączonymi niezbędnymi interfejsami API i kluczem API, który umożliwia korzystanie z pakietu SDK Map Google na Androida. Więcej informacji znajdziesz w tych artykułach:

• Konfigurowanie projektu Google Cloud
• Korzystanie z klucza interfejsu API

Dodawanie klucza interfejsu API do aplikacji

1. Otwórz plik local.properties projektu.

2. Dodaj ten ciąg, a potem zastąp wartość YOUR_API_KEY swoim kluczem API:

   MAPS_API_KEY=YOUR_API_KEY
   

   Podczas kompilowania aplikacji wtyczka Gradle obiektów tajnych dla Androida skopiuje klucz interfejsu API i umieści go w pliku manifestu Androida jako zmienną kompilacji. Szczegóły znajdziesz poniżej.

Tworzenie i uruchamianie aplikacji

Aby skompilować i uruchomić aplikację:

1. Podłącz urządzenie z Androidem do komputera. Aby włączyć opcje programisty na urządzeniu z Androidem i skonfigurować system tak, aby wykrywał urządzenie, wykonaj te instrukcje.

   Możesz też skonfigurować urządzenie wirtualne za pomocą Menedżera urządzenia wirtualnego z Androidem (AVD). Wybierając emulator, wybierz obraz, który zawiera interfejsy API Google. Więcej informacji znajdziesz w artykule Konfigurowanie projektu w Android Studio .

2. W Android Studio kliknij opcję menu Uruchom (lub ikonę odtwarzania). Wybierz urządzenie zgodnie z podanymi instrukcjami.

Android Studio wywołuje Gradle, aby skompilować aplikację, a potem uruchamia ją na urządzeniu lub w emulatorze. Powinna Ci się wyświetlić mapa ze znacznikiem wskazującym na Sydney na wschodnim wybrzeżu Australii, podobna do tej na tej stronie.

Rozwiązywanie problemów:

• Jeśli nie widzisz mapy, sprawdź, czy masz klucz API i czy został on dodany do aplikacji w sposób podany powyżej. Sprawdź dziennik w Android Monitor w Android Studio, aby znaleźć komunikaty o błędach dotyczących klucza interfejsu API.
• Aby wyświetlić logi i przeprowadzić debugowanie aplikacji, użyj narzędzi debugowania w Android Studio.

Zrozumienie kodu

W tej części samouczka omawiamy najważniejsze elementy aplikacji MapWithMarker, aby pomóc Ci zrozumieć, jak utworzyć podobną aplikację.

Sprawdź plik manifestu Androida

W pliku AndroidManifest.xml aplikacji sprawdź te elementy:

• Dodaj element meta-data, aby osadzić wersję Usług Google Play, z którą została skompilowana aplikacja.

  <meta-data
      android:name="com.google.android.gms.version"
      android:value="@integer/google_play_services_version" />
  

• Dodaj element meta-data, podając klucz interfejsu API. Przykładowy kod towarzyszący temu samouczkowi mapuje wartość klucza interfejsu API na zmienną kompilacji odpowiadającą nazwie klucza zdefiniowanego wcześniej, MAPS_API_KEY. Podczas kompilowania aplikacji wtyczka Gradle obiektów tajnych dla Androida udostępnia klucze z pliku local.properties jako zmienne kompilacji w pliku manifestu.

  <meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="${MAPS_API_KEY}" />
  

  W pliku build.gradle ten wiersz przekazuje klucz interfejsu API do pliku manifestu Androida.

    id 'com.google.android.libraries.mapsplatform.secrets-gradle-plugin'
  

Poniżej znajdziesz przykład pełnego pliku manifestu:

<?xml version="1.0" encoding="utf-8"?>
<!--
 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.
-->

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <meta-data
            android:name="com.google.android.gms.version"
            android:value="@integer/google_play_services_version" />

        <!--
             The API key for Google Maps-based APIs.
        -->
        <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="${MAPS_API_KEY}" />

        <activity
            android:name=".MapsMarkerActivity"
            android:label="@string/title_activity_maps"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Dodawanie mapy

Wyświetlanie mapy za pomocą pakietu Maps SDK na Androida.

1. Dodaj element <fragment> do pliku układu aktywności. activity_maps.xml Ten element definiuje obiekt SupportMapFragment, który działa jako kontener mapy i zapewnia dostęp do obiektu GoogleMap. W tym samouczku fragment mapy jest oparty na wersji biblioteki obsługi Androida, aby zapewnić zgodność wsteczną ze starszymi wersjami platformy Android.

   <!--
    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.
   -->
   
   <fragment xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:id="@+id/map"
       android:name="com.google.android.gms.maps.SupportMapFragment"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       tools:context="com.example.mapwithmarker.MapsMarkerActivity" />

2. W metodzie onCreate() aktywności ustaw plik układu jako widok treści. Aby uzyskać uchwyt do fragmentu mapy, wywołaj funkcję FragmentManager.findFragmentById(). Następnie użyj getMapAsync(), aby zarejestrować się do wywołania zwrotnego mapy:

   Java

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       // Retrieve the content view that renders the map.
       setContentView(R.layout.activity_maps);
   
       // Get the SupportMapFragment and request notification when the map is ready to be used.
       SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
               .findFragmentById(R.id.map);
       mapFragment.getMapAsync(this);
   }
   MapsMarkerActivity.java

   Kotlin

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       // Retrieve the content view that renders the map.
       setContentView(R.layout.activity_maps)
   
       // Get the SupportMapFragment and request notification when the map is ready to be used.
       val mapFragment = supportFragmentManager.findFragmentById(R.id.map) as? SupportMapFragment
       mapFragment?.getMapAsync(this)
   }
   MapsMarkerActivity.kt

3. Zaimplementuj interfejs OnMapReadyCallback i zastąp metodę onMapReady(), aby skonfigurować mapę, gdy obiekt GoogleMap jest dostępny:

   Java

   public class MapsMarkerActivity extends AppCompatActivity
           implements OnMapReadyCallback {
   
       // ...
   
       @Override
       public void onMapReady(GoogleMap googleMap) {
           LatLng sydney = new LatLng(-33.852, 151.211);
           googleMap.addMarker(new MarkerOptions()
               .position(sydney)
               .title("Marker in Sydney"));
       }
   }
   MapsMarkerActivity.java

   Kotlin

   class MapsMarkerActivity : AppCompatActivity(), OnMapReadyCallback {
   
       // ...
   
       override fun onMapReady(googleMap: GoogleMap) {
         val sydney = LatLng(-33.852, 151.211)
         googleMap.addMarker(
           MarkerOptions()
             .position(sydney)
             .title("Marker in Sydney")
         )
       }
   }
   MapsMarkerActivity.kt

Domyślnie pakiet SDK Map Google na Androida wyświetla zawartość okna informacji, gdy użytkownik kliknie znacznik. Jeśli wystarcza Ci działanie domyślne, nie musisz dodawać do znacznika listenera kliknięcia.

Gratulacje! Stworzysz aplikację na Androida, która wyświetla mapę Google ze znacznikiem wskazującym konkretną lokalizację. Poznasz też sposób korzystania z pakietu SDK Map na Androida.

Dalsze kroki

Dowiedz się więcej o obiekcie mapy i o tym, co możesz zrobić z oznacznikami.