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

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

소개

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

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

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

자바


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

      

Kotlin


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

      

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

자바


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

      

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
)

      

나만의 지형지물 추가

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

자바


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

      

Kotlin


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

      

클릭 이벤트 처리

클러스터, KML, GeoJSON의 경우, 현재 설정 중인 레이어의 생성자에서 Manager 클래스를 전달하는 동안 클릭 리스너가 정상적으로 작동합니다. 예를 들어, KML 레이어의 클릭 리스너를 설정하는 방법은 다음과 같습니다.

자바


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

      

Kotlin


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

      

나만의 마커, 지면 오버레이, 다중선, 다각형을 추가할 때 Collection 객체에 클릭 리스너를 꼭 추가해야 합니다. 예를 들면 markerCollection에 마커 클릭 리스너를 설정하는 방법은 다음과 같습니다.

자바


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

      

Kotlin


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

      

데모 앱 보기

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