Tiện ích nhiều lớp của Google Maps

1. Giới thiệu
2. Thêm nhiều lớp cụm, KML và GeoJSON
3. Thêm các tính năng của riêng bạn
4. Xử lý các sự kiện nhấp chuột
5. Xem ứng dụng minh hoạ

Giới thiệu

Trong các hướng dẫn trước, bạn đã tìm hiểu cách thêm tính năng từ KML và GeoJSON vào bản đồ của mình, cũng như các cụm của điểm đánh dấu. Nhưng nếu bạn muốn thêm nhiều lớp trong số này trên cùng một bản đồ và nhận các sự kiện nhấp chuột độc lập cho mỗi lớp thì sao?

Thêm nhiều lớp cụm, KML và GeoJSON

Thư viện này bao gồm các đối tượng Manager để giúp quản lý sự kiện nhấp chuột cho nhiều loại lớp. Vì vậy, trước khi thiết lập các lớp, trước tiên, bạn cần tạo thực thể của các lớp này và chuyển vào GoogleMap của mình:

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);

      

Tiếp theo, bạn có thể truyền các lớp trình quản lý này vào hàm khởi tạo của các lớp khác khi thiết lập chúng:

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);

      

Thêm đối tượng của riêng bạn

Nếu bạn muốn thêm điểm đánh dấu, lớp phủ trên mặt đất, hình nhiều đường hoặc đa giác của riêng mình cùng với các lớp này, hãy tạo Collection của riêng bạn rồi sử dụng Managers để thêm đối tượng thay vì thêm trực tiếp chúng vào đối tượng GoogleMap. Ví dụ: nếu bạn muốn thêm một điểm đánh dấu mới:

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"));

      

Xử lý sự kiện nhấp chuột

Đối với các cụm, KML và GeoJSON, trình nghe lượt nhấp hoạt động như bình thường – miễn là bạn truyền các lớp Manager trong hàm khởi tạo của lớp mà bạn đang đặt. Ví dụ: dưới đây là cách thiết lập trình nghe lượt nhấp cho lớp KML:

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());

      

Khi bạn thêm điểm đánh dấu, lớp phủ trên mặt đất, hình nhiều đường hoặc đa giác của riêng mình, hãy nhớ thêm trình nghe lượt nhấp vào các đối tượng Collection đó. Ví dụ: dưới đây là cách thiết lập trình nghe lượt nhấp vào điểm đánh dấu trên markerCollection:

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;
});

      

Xem ứng dụng minh hoạ

Để tham khảo ví dụ về cách thêm nhiều lớp, hãy xem MultiLayerDemoActivity trong ứng dụng minh hoạ đi kèm với thư viện tiện ích. Hướng dẫn thiết lập sẽ cho bạn biết cách chạy ứng dụng minh hoạ.