Google 지도 멀티 레이어 유틸리티

플랫폼 선택: Android JavaScript
  1. 소개
  2. 여러 클러스터, KML, GeoJSON 레이어 추가
  3. 나만의 지형지물 추가
  4. 클릭 이벤트 처리
  5. 데모 앱 보기

소개

이전 튜토리얼에서는 KML 및 GeoJSON의 지형지물뿐 아니라 마커의 클러스터를 지도에 추가하는 방법을 알아보았습니다. 하지만 동일한 지도에 이러한 레이어를 여러 개 추가하고 레이어마다 독립적인 클릭 이벤트를 가져오려면 어떻게 해야 할까요?

여러 클러스터, KML, GeoJSON 레이어 추가

라이브러리에는 여러 유형의 레이어에 대한 클릭 이벤트를 관리하는 데 도움이 되는 Manager 객체가 포함됩니다. 따라서 레이어를 설정하기 전에 먼저 이를 인스턴스화하고 GoogleMap에 전달해야 합니다.

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

그런 다음, 이러한 관리자 클래스를 설정 시 다른 레이어의 생성자로 다음과 같이 전달할 수 있습니다.

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

나만의 지형지물 추가

이 레이어와 함께 자체 마커, 지면 오버레이, 다중선 또는 다각형을 추가하려는 경우에는 GoogleMap 객체에 직접 추가하는 대신 자체 Collection을 만든 후 Managers를 사용하여 지형지물을 추가합니다. 예를 들어, 새 마커를 추가하는 방법은 다음과 같습니다.

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

클릭 이벤트 처리

클러스터, KML, GeoJSON의 경우, 현재 설정 중인 레이어의 생성자에서 Manager 클래스를 전달하는 동안 클릭 리스너가 정상적으로 작동합니다. 예를 들어, 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());

나만의 마커, 지면 오버레이, 다중선, 다각형을 추가할 때 Collection 객체에 클릭 리스너를 꼭 추가해야 합니다. 예를 들면 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;
});

데모 앱 보기

여러 레이어를 추가하는 예를 보려면 유틸리티 라이브러리와 함께 제공되는 데모 앱에서 MultiLayerDemoActivity를 확인하세요. 설정 가이드는 데모 앱을 실행하는 방법을 보여줍니다.