Polyline dan Poligon untuk Merepresentasikan Rute dan Area

Tutorial ini menunjukkan cara menambahkan peta Google ke aplikasi Android, dan menggunakan polyline serta poligon untuk merepresentasikan rute dan area pada peta.

Ikuti tutorial ini untuk membuat aplikasi Android menggunakan Maps SDK for Android. Lingkungan pengembangan yang direkomendasikan adalah Android Studio.

Mendapatkan kode

Lakukan clone atau download repositori Google Maps Android API v2 Samples dari GitHub.

Menyiapkan project pengembangan

Ikuti langkah-langkah berikut untuk membuat project tutorial di Android Studio.

  1. Download dan instal Android Studio.
  2. Tambahkan paket layanan Google Play ke Android Studio.
  3. Lakukan clone atau download repositori Google Maps Android API v2 Samples jika Anda belum melakukannya saat mulai membaca tutorial ini.
  4. Impor project tutorial:

    • Di Android Studio, pilih File > New > Import Project.
    • Buka lokasi tempat Anda menyimpan repositori Google Maps Android API v2 Samples setelah mendownloadnya.
    • Temukan project Poligon di lokasi ini:
      PATH-TO-SAVED-REPO/android-samples/tutorials/Polygons
    • Pilih direktori project, lalu klik OK. Android Studio akan membuat project Anda menggunakan alat build Gradle.

Mendapatkan kunci API dan mengaktifkan API yang diperlukan

Untuk menyelesaikan tutorial ini, Anda memerlukan kunci Google API yang telah diberi otorisasi untuk menggunakan Maps SDK for Android.

Klik tombol di bawah untuk mendapatkan kunci dan mengaktifkan API.

Mulai

Untuk detail selengkapnya, lihat panduan lengkap untuk mendapatkan kunci API.

Menambahkan kunci API ke aplikasi

  1. Edit file gradle.properties project Anda.
  2. Tempelkan kunci API ke nilai properti GOOGLE_MAPS_API_KEY. Saat membuat aplikasi Anda, Gradle menyalin kunci API ke dalam manifes Android untuk aplikasi tersebut, seperti yang dijelaskan di bawah.

    GOOGLE_MAPS_API_KEY=PASTE-YOUR-API-KEY-HERE
    

Membuat dan menjalankan aplikasi

  1. Hubungkan perangkat Android ke komputer Anda. Ikuti petunjuk untuk mengaktifkan opsi developer di perangkat Android Anda dan mengonfigurasikan sistem untuk mendeteksi perangkat tersebut. (Atau, Anda dapat menggunakan Android Virtual Device (AVD) Manager untuk mengonfigurasikan perangkat virtual. Saat memilih emulator, pastikan Anda memilih image yang berisi Google API. Untuk mengetahui detail selengkapnya, lihat panduan memulai.)
  2. Di Android Studio, klik opsi menu Run (atau ikon tombol putar). Pilih perangkat saat diminta.

Android Studio memanggil Gradle untuk membuat aplikasi, lalu menjalankan aplikasi tersebut di perangkat atau di emulator.

Anda akan melihat peta dengan dua poligon yang ditempatkan di atas Australia, serupa dengan gambar di halaman ini.

Pemecahan masalah:

Memahami kode

Bagian tutorial ini menjelaskan bagian yang paling signifikan dari aplikasi Poligon untuk membantu Anda memahami cara membuat aplikasi yang serupa.

Memeriksa manifes Android

Perhatikan elemen berikut di file AndroidManifest.xml aplikasi Anda:

  • Tambahkan elemen meta-data untuk menyematkan versi layanan Google Play yang digunakan untuk mengompilasi aplikasi.

    <meta-data
        android:name="com.google.android.gms.version"
        android:value="@integer/google_play_services_version" />
    
  • Tambahkan elemen meta-data yang menentukan kunci API Anda. Contoh yang disertakan dalam tutorial ini memetakan nilai untuk kunci API ke string google_maps_key. Saat Anda membuat aplikasi, Gradle menyalin kunci API dari file gradle.properties project Anda ke nilai string.

    <meta-data
      android:name="com.google.android.geo.API_KEY"
      android:value="@string/google_maps_key" />
    

    Untuk melihat cara kunci API dipetakan ke nilai string, perhatikan build.gradle aplikasi Anda. File ini berisi baris berikut yang memetakan string google_maps_key ke properti gradle GOOGLE_MAPS_API_KEY:

    resValue "string", "google_maps_key",
            (project.findProperty("GOOGLE_MAPS_API_KEY") ?: "")
    

Berikut adalah contoh lengkap manifes:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.polygons">

    <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="@string/google_maps_key" />

        <activity
            android:name="com.example.polygons.PolyActivity"
            android:label="@string/title_activity_maps">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Menambahkan peta

Tampilkan peta, menggunakan Maps SDK untuk Android.

  1. Tambahkan elemen <fragment> ke file tata letak aktivitas Anda, activity_maps.xml. Elemen ini menentukan SupportMapFragment agar berfungsi sebagai penampung untuk peta dan untuk memberikan akses ke objek GoogleMap. Tutorial ini menggunakan fragmen peta versi Android Support Library untuk memastikan kompatibilitas mundur dengan framework Android versi lama.

    <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.polygons.PolyActivity" />
    
    
  2. Dalam metode onCreate() aktivitas, tetapkan file tata letak sebagai tampilan konten. Dapatkan handle ke fragmen peta dengan memanggil FragmentManager.findFragmentById(). Selanjutnya, gunakan getMapAsync() untuk mendaftarkan callback peta:

    @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(map);
        mapFragment.getMapAsync(this);
    }
    
  3. Terapkan antarmuka OnMapReadyCallback dan ganti metode onMapReady(). API memanggil callback ini jika objek GoogleMap tersedia, sehingga Anda dapat menambahkan objek ke peta dan menyesuaikannya lebih lanjut untuk aplikasi:

    public class PolyActivity extends AppCompatActivity
            implements
                    OnMapReadyCallback,
                    GoogleMap.OnPolylineClickListener,
                    GoogleMap.OnPolygonClickListener {
    
        // More code goes here, including the onCreate() method described above.
    
        @Override
        public void onMapReady(GoogleMap googleMap) {
    
            // Add polylines and polygons to the map. This section shows just
            // a single polyline. Read the rest of the tutorial to learn more.
            Polyline polyline1 = googleMap.addPolyline(new PolylineOptions()
                    .clickable(true)
                    .add(
                            new LatLng(-35.016, 143.321),
                            new LatLng(-34.747, 145.592),
                            new LatLng(-34.364, 147.891),
                            new LatLng(-33.501, 150.217),
                            new LatLng(-32.306, 149.248),
                            new LatLng(-32.491, 147.309)));
    
            // Position the map's camera near Alice Springs in the center of Australia,
            // and set the zoom factor so most of Australia shows on the screen.
            googleMap.moveCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(-23.684, 133.903), 4));
    
            // Set listeners for click events.
            googleMap.setOnPolylineClickListener(this);
            googleMap.setOnPolygonClickListener(this);
        }
    }
    

Menambahkan polyline untuk menggambar garis pada peta

Polyline adalah rangkaian segmen garis yang terhubung. Polyline berguna untuk merepresentasikan rute, jalur, atau hubungan lain di antara beberapa lokasi pada peta.

  1. Buat objek PolylineOptions dan tambahkan titik ke objek tersebut. Setiap titik merepresentasikan lokasi pada peta, yang Anda tentukan dengan objek LatLng yang berisi nilai lintang dan bujur. Contoh kode di bawah membuat polyline dengan 6 titik.

  2. Panggil GoogleMap.addPolyline() untuk menambahkan polyline ke peta.

    Polyline polyline1 = googleMap.addPolyline(new PolylineOptions()
            .clickable(true)
            .add(
                    new LatLng(-35.016, 143.321),
                    new LatLng(-34.747, 145.592),
                    new LatLng(-34.364, 147.891),
                    new LatLng(-33.501, 150.217),
                    new LatLng(-32.306, 149.248),
                    new LatLng(-32.491, 147.309)));
    

Tetapkan opsi clickable polyline ke true jika ingin menangani peristiwa klik pada polyline. Ada penjelasan lainnya tentang penanganan peristiwa nanti dalam tutorial ini.

Menyimpan data arbitrer dengan polyline

Anda dapat menyimpan objek data arbitrer dengan polyline dan objek geometri lainnya.

  1. Panggil Polyline.setTag() untuk menyimpan objek data dengan polyline. Kode di bawah menentukan tag arbitrer (A) yang menunjukkan jenis polyline.

    Polyline polyline1 = googleMap.addPolyline(new PolylineOptions()
            .clickable(true)
            .add(
                    new LatLng(-35.016, 143.321),
                    new LatLng(-34.747, 145.592),
                    new LatLng(-34.364, 147.891),
                    new LatLng(-33.501, 150.217),
                    new LatLng(-32.306, 149.248),
                    new LatLng(-32.491, 147.309)));
    // Store a data object with the polyline, used here to indicate an arbitrary type.
    polyline1.setTag("A");
    
  2. Ambil data menggunakan Polyline.getTag(), seperti yang ditunjukkan pada bagian berikutnya.

Menambahkan penataan gaya kustom ke polyline Anda

Anda dapat menentukan berbagai properti penataan gaya dalam objek PolylineOptions. Opsi penataan gaya mencakup warna guratan, lebar guratan, pola guratan, jenis sambungan, serta penutup awal dan akhir. Jika Anda tidak menentukan properti tertentu, API akan menggunakan default untuk properti tersebut.

Kode berikut menerapkan penutup bundar ke ujung garis, dan penutup awal yang berbeda akan bergantung pada jenis polyline, dengan jenis properti arbitrer disimpan dalam objek data untuk polyline. Contoh ini juga menetapkan lebar guratan, warna guratan, dan jenis sambungan:

private static final int COLOR_BLACK_ARGB = 0xff000000;
private static final int POLYLINE_STROKE_WIDTH_PX = 12;

private void stylePolyline(Polyline polyline) {
    String type = "";
    // Get the data object stored with the polyline.
    if (polyline.getTag() != null) {
        type = polyline.getTag().toString();
    }

    switch (type) {
        // If no type is given, allow the API to use the default.
        case "A":
            // Use a custom bitmap as the cap at the start of the line.
            polyline.setStartCap(
                    new CustomCap(
                            BitmapDescriptorFactory.fromResource(R.drawable.ic_arrow), 10));
            break;
        case "B":
            // Use a round cap at the start of the line.
            polyline.setStartCap(new RoundCap());
            break;
    }

    polyline.setEndCap(new RoundCap());
    polyline.setWidth(POLYLINE_STROKE_WIDTH_PX);
    polyline.setColor(COLOR_BLACK_ARGB);
    polyline.setJointType(JointType.ROUND);
}

Kode di atas menentukan bitmap kustom untuk penutup awal polyline jenis A, dan menetapkan lebar guratan referensi sebesar 10 piksel. API menskalakan bitmap berdasarkan lebar guratan referensi. Saat menentukan lebar guratan referensi, berikan lebar yang digunakan saat mendesain gambar bitmap, pada dimensi asli gambar. Petunjuk: Buka gambar bitmap dengan perbesaran 100% dalam editor gambar, dan buat lebar guratan garis yang diinginkan yang sesuai dengan gambar tersebut.

Baca selengkapnya tentang penutup garis dan opsi lainnya untuk menyesuaikan bentuk.

Menangani peristiwa klik pada polyline

  1. Buat polyline yang dapat diklik dengan memanggil Polyline.setClickable(). (Secara default, polyline tidak dapat diklik dan aplikasi Anda tidak akan menerima notifikasi saat pengguna mengetuk polyline.)

  2. Terapkan antarmuka OnPolylineClickListener dan panggil GoogleMap.setOnPolylineClickListener() untuk menetapkan pemroses pada peta:

    public class PolyActivity extends AppCompatActivity
            implements
                    OnMapReadyCallback,
                    GoogleMap.OnPolylineClickListener,
                    GoogleMap.OnPolygonClickListener {
    
        @Override
        public void onMapReady(GoogleMap googleMap) {
            // Add a polyline to the map.
            Polyline polyline1 = googleMap.addPolyline((new PolylineOptions())
                    .clickable(true)
                    .add(new LatLng(-35.016, 143.321),
                            new LatLng(-34.747, 145.592),
                            new LatLng(-34.364, 147.891),
                            new LatLng(-33.501, 150.217),
                            new LatLng(-32.306, 149.248),
                            new LatLng(-32.491, 147.309)));
    
            // Set listeners for click events.
            googleMap.setOnPolylineClickListener(this);
            googleMap.setOnPolygonClickListener(this);
        }
    }
    
  3. Ganti metode callback onPolylineClick(). Contoh berikut mengubah pola guratan garis antara padat dan putus-putus, setiap kali pengguna mengklik polyline:

    private static final PatternItem DOT = new Dot();
    private static final PatternItem GAP = new Gap(PATTERN_GAP_LENGTH_PX);
    //
    // Create a stroke pattern of a gap followed by a dot.
    private static final List<PatternItem> PATTERN_POLYLINE_DOTTED = Arrays.asList(GAP, DOT);
    
    @Override
    public void onPolylineClick(Polyline polyline) {
        // Flip from solid stroke to dotted stroke pattern.
        if ((polyline.getPattern() == null) || (!polyline.getPattern().contains(DOT))) {
            polyline.setPattern(PATTERN_POLYLINE_DOTTED);
        } else {
            // The default pattern is a solid stroke.
            polyline.setPattern(null);
        }
    
        Toast.makeText(this, "Route type " + polyline.getTag().toString(),
                Toast.LENGTH_SHORT).show();
    }
    

Menambahkan poligon untuk merepresentasikan area di peta

Polygon adalah bentuk yang terdiri dari rangkaian koordinat yang berurutan, mirip dengan Polyline. Perbedaannya adalah bahwa poligon menentukan area tertutup dengan interior yang dapat diisi, sementara polyline terbuka.

  1. Buat objek PolygonOptions dan tambahkan titik ke objek tersebut. Setiap titik merepresentasikan lokasi pada peta, yang Anda tentukan dengan objek LatLng yang berisi nilai lintang dan bujur. Contoh kode berikut membuat poligon dengan 4 titik.

  2. Buat poligon yang dapat diklik dengan memanggil Polygon.setClickable(). (Secara default, poligon tidak dapat diklik dan aplikasi Anda tidak akan menerima notifikasi saat pengguna mengetuk poligon.) Menangani peristiwa klik poligon mirip dengan menangani peristiwa pada polyline, yang dijelaskan sebelumnya dalam tutorial ini.

  3. Panggil GoogleMap.addPolygon() untuk menambahkan poligon ke peta.

  4. Panggil Polygon.setTag() untuk menyimpan objek data dengan poligon. Kode di bawah menetapkan jenis arbitrer (alpha) untuk poligon.

    Polygon polygon1 = googleMap.addPolygon(new PolygonOptions()
            .clickable(true)
            .add(
                    new LatLng(-27.457, 153.040),
                    new LatLng(-33.852, 151.211),
                    new LatLng(-37.813, 144.962),
                    new LatLng(-34.928, 138.599)));
    // Store a data object with the polygon, used here to indicate an arbitrary type.
    polygon1.setTag("alpha");
    

Menambahkan penataan gaya kustom ke poligon

Anda dapat menentukan sejumlah properti penataan gaya dalam objek PolygonOptions. Opsi penataan gaya meliputi warna guratan, lebar guratan, pola guratan, jenis sambungan guratan, dan warna isian. Jika Anda tidak menentukan properti tertentu, API akan menggunakan default untuk properti tersebut.

Kode berikut menerapkan warna dan pola guratan tertentu, bergantung pada jenis poligon, di mana jenis adalah properti arbitrer yang disimpan dalam objek data untuk poligon tersebut:

private static final int COLOR_BLACK_ARGB = 0xff000000;
private static final int COLOR_WHITE_ARGB = 0xffffffff;
private static final int COLOR_GREEN_ARGB = 0xff388E3C;
private static final int COLOR_PURPLE_ARGB = 0xff81C784;
private static final int COLOR_ORANGE_ARGB = 0xffF57F17;
private static final int COLOR_BLUE_ARGB = 0xffF9A825;

private static final int POLYGON_STROKE_WIDTH_PX = 8;
private static final int PATTERN_DASH_LENGTH_PX = 20;
private static final int PATTERN_GAP_LENGTH_PX = 20;
private static final PatternItem DOT = new Dot();
private static final PatternItem DASH = new Dash(PATTERN_DASH_LENGTH_PX);
private static final PatternItem GAP = new Gap(PATTERN_GAP_LENGTH_PX);

// Create a stroke pattern of a gap followed by a dash.
private static final List<PatternItem> PATTERN_POLYGON_ALPHA = Arrays.asList(GAP, DASH);

// Create a stroke pattern of a dot followed by a gap, a dash, and another gap.
private static final List<PatternItem> PATTERN_POLYGON_BETA =
        Arrays.asList(DOT, GAP, DASH, GAP);

private void stylePolygon(Polygon polygon) {
    String type = "";
    // Get the data object stored with the polygon.
    if (polygon.getTag() != null) {
        type = polygon.getTag().toString();
    }

    List<PatternItem> pattern = null;
    int strokeColor = COLOR_BLACK_ARGB;
    int fillColor = COLOR_WHITE_ARGB;

    switch (type) {
        // If no type is given, allow the API to use the default.
        case "alpha":
            // Apply a stroke pattern to render a dashed line, and define colors.
            pattern = PATTERN_POLYGON_ALPHA;
            strokeColor = COLOR_GREEN_ARGB;
            fillColor = COLOR_PURPLE_ARGB;
            break;
        case "beta":
            // Apply a stroke pattern to render a line of dots and dashes, and define colors.
            pattern = PATTERN_POLYGON_BETA;
            strokeColor = COLOR_ORANGE_ARGB;
            fillColor = COLOR_BLUE_ARGB;
            break;
    }

    polygon.setStrokePattern(pattern);
    polygon.setStrokeWidth(POLYGON_STROKE_WIDTH_PX);
    polygon.setStrokeColor(strokeColor);
    polygon.setFillColor(fillColor);
}

Baca selengkapnya tentang pola guratan dan opsi lainnya untuk menyesuaikan bentuk.

Langkah berikutnya

Pelajari objek Lingkaran. Lingkaran mirip dengan poligon tetapi memiliki properti yang mencerminkan bentuk lingkaran.