Utilitas Multi-lapisan Google Maps

Pilih platform: Android JavaScript

1. Pengantar
2. Menambahkan beberapa lapisan GeoJSON, KML, dan cluster
3. Menambahkan fitur Anda sendiri
4. Menangani peristiwa klik
5. Melihat aplikasi demo

Pengantar

Dalam tutorial sebelumnya, Anda telah mempelajari cara menambahkan fitur dari KML dan GeoJSON ke peta Anda, serta cluster penanda. Tetapi bagaimana jika Anda ingin menambahkan beberapa lapisan ini pada peta yang sama dan mendapatkan peristiwa klik independen untuk masing-masing lapisan?

Menambahkan beberapa lapisan GeoJSON, KML, dan cluster

Library menyertakan objek Manager untuk membantu mengelola peristiwa klik untuk beberapa jenis lapisan. Jadi, sebelum menyiapkan lapisan, Anda harus membuat instance lapisan ini dan meneruskan GoogleMap lebih dahulu:

KotlinJava

val markerManager = MarkerManager(map)
val groundOverlayManager = GroundOverlayManager(map!!)
val polygonManager = PolygonManager(map)
val polylineManager = PolylineManager(map)

      

MarkerManager markerManager = new MarkerManager(map);
GroundOverlayManager groundOverlayManager = new GroundOverlayManager(map);
PolygonManager polygonManager = new PolygonManager(map);
PolylineManager polylineManager = new PolylineManager(map);

      

Selanjutnya, Anda dapat meneruskan class pengelola ini ke dalam konstruktor lapisan lain saat menyiapkannya:

KotlinJava

val clusterManager =
    ClusterManager<MyItem>(context, map, markerManager)
val geoJsonLineLayer = GeoJsonLayer(
    map,
    R.raw.geojson_file,
    context,
    markerManager,
    polygonManager,
    polylineManager,
    groundOverlayManager
)
val kmlPolylineLayer = KmlLayer(
    map,
    R.raw.kml_file,
    context,
    markerManager,
    polygonManager,
    polylineManager,
    groundOverlayManager,
    null
)

      

ClusterManager<MyItem> clusterManager = new ClusterManager<>(context, map, markerManager);
GeoJsonLayer geoJsonLineLayer = new GeoJsonLayer(map, R.raw.geojson_file, context, markerManager, polygonManager, polylineManager, groundOverlayManager);
KmlLayer kmlPolylineLayer = new KmlLayer(map, R.raw.kml_file, context, markerManager, polygonManager, polylineManager, groundOverlayManager, null);

      

Menambahkan fitur Anda sendiri

Jika Anda ingin menambahkan penanda, overlay bumi, polyline, atau poligon Anda sendiri bersama lapisan ini, buat Collection Anda sendiri, lalu gunakan Managers untuk menambahkan fitur, bukan menambahkannya secara langsung ke objek GoogleMap. Misalnya, jika Anda ingin menambahkan penanda baru:

KotlinJava

val markerCollection =
    markerManager.newCollection()
markerCollection.addMarker(
    MarkerOptions()
        .position(LatLng(51.150000, -0.150032))
        .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
        .title("Unclustered marker")
)

      

MarkerManager.Collection markerCollection = markerManager.newCollection();
markerCollection.addMarker(new MarkerOptions()
    .position(new LatLng(51.150000, -0.150032))
    .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
    .title("Unclustered marker"));

      

Menangani peristiwa klik

Untuk cluster, KML, dan GeoJSON, pemroses klik berfungsi seperti biasa - selama Anda meneruskan class Manager dalam konstruktor lapisan yang ditetapkan. Misalnya, berikut cara menyiapkan pemroses klik untuk lapisan KML:

KotlinJava

kmlPolylineLayer.addLayerToMap()
kmlPolylineLayer.setOnFeatureClickListener { feature: Feature ->
    Toast.makeText(context,
        "KML polyline clicked: ${feature.getProperty("name")}",
        Toast.LENGTH_SHORT
    ).show()
}

      

kmlPolylineLayer.addLayerToMap();
kmlPolylineLayer.setOnFeatureClickListener(feature -> Toast.makeText(context,
    "KML polyline clicked: " + feature.getProperty("name"),
    Toast.LENGTH_SHORT).show());

      

Saat menambahkan penanda, overlay bumi, polyline, atau poligon Anda sendiri, pastikan untuk menambahkan pemroses klik ke objek Collection tersebut. Misalnya, berikut adalah cara menyiapkan pemroses klik penanda di markerCollection:

KotlinJava

markerCollection.setOnMarkerClickListener { marker: Marker ->
    Toast.makeText(
        context,
        "Marker clicked: ${marker.title}",
        Toast.LENGTH_SHORT
    ).show()
    false
}

      

markerCollection.setOnMarkerClickListener(marker -> { Toast.makeText(context,
    "Marker clicked: " + marker.getTitle(),
        Toast.LENGTH_SHORT).show();
    return false;
});

      

Melihat aplikasi demo

Untuk contoh penambahan beberapa lapisan, lihat MultiLayerDemoActivity pada aplikasi demo yang disertakan dengan library utilitas. Panduan penyiapan menunjukkan cara menjalankan aplikasi demo.