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

独自の対象物の追加

これらのレイヤとともに独自のマーカー、地面オーバーレイ、ポリライン、またはポリゴンを追加する場合は、独自の Collection を作成したら、GoogleMap オブジェクトに直接する代わりに、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 をご覧ください。また、設定ガイドでは、デモアプリを実行する方法を説明しています。