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:

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

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:

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

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:

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

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:

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

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:

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

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ạ.