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

Chọn nền tảng: Android JavaScript
  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 bạn, cũng như cụm điểm đánh dấu. Nhưng nếu bạn muốn thêm một vài lớp trong số này trên cùng một bản đồ và nhận nhấp chuột độc lập thì sao cho mỗi sự kiện không?

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ý các 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 của mình, đầu tiên bạn cần tạo thực thể của các lớp này và truyền vào GoogleMap của bạn:

Kotlin



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

Java


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ể chuyển các lớp quản lý này vào hàm khởi tạo của các lớp khác khi bạn thiết lập:

Kotlin



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
)

Java


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 các tính năng của riêng bạn

Nếu bạn muốn thêm điểm đánh dấu, lớp phủ mặt đất, hình nhiều đường hoặc đa giác của riêng mình cùng với những các lớp, hãy tạo Collection của riêng bạn rồi sử dụng Managers để thêm tính năng thay vì thêm trực tiếp 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:

Kotlin



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

Java


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 vào 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:

Kotlin



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

Java


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 lượt nhấp trình nghe đối với các đối tượng Collection đó. Ví dụ: dưới đây là cách thiết lập điểm đánh dấu trình nghe lượt nhấp trên markerCollection:

Kotlin



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

Java


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

Xem ứng dụng minh hoạ

Để biết 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ẽ hướng dẫn bạn cách chạy ứng dụng minh hoạ.