はじめに
最近GoogleMapマーカークラスタに触れる機会があり、その際にクラスタをカスタマイズをする必要がありました。調査の過程で知ったカスタマイズ方法を少し紹介します。
クラスタ内のアイテムクラス
公式ドキュメントにもあるように、クラスタ内に入れるアイテムとして、ClusterItemインタフェースを実装したクラスを用意します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | publicclassMyItemimplementsClusterItem{ privatefinalLatLng mPosition; privateStringmTitle; privateStringmSnippet; publicMyItem(doublelat,doublelng,Stringtitle,Stringsnippet){ mPosition=newLatLng(lat,lng); mTitle=title; mSnippet=snippet; } @Override publicLatLng getPosition(){returnmPosition;} @Override publicStringgetTitle(){returnmTitle;} @Override publicStringgetSnippet(){returnmSnippet;} publicvoidsetTitle(Stringtitle){mTitle=title;} publicvoidsetSnippet(Stringsnippet){mSnippet=snippet;} } |
クラスタをレンダリングするクラス
DefaultClusterRendererを継承して、独自のレンダリング用クラスを作成します。
このCustomRendererで、親クラスのメソッドをオーバーライドすることで、見た目や挙動を変えていくことができます。
1 2 3 4 5 6 | publicclassCustomRendererextendsDefaultClusterRenderer<MyItem>{ publicCustomRenderer(Context context,GoogleMap map,ClusterManager<MyItem>clusterManager){ super(context,map,clusterManager); } } |
クラスタの色を設定する
親クラスのDefaultClusterRendererではprivate static final int[] BUCKETS = {10, 20, 50, 100, 200, 500, 1000};
というクラスタ内のアイテム数の区分を設定して、それぞれ別の色になるように設定しています。これを変えたい場合はCustomRendererでgetColorをオーバーライドします。
1 2 3 4 | @Override protectedintgetColor(intclusterSize){ returnColor.rgb(0,255,255);// 常に#00ffff } |
クラスタ化の最小個数を設定する
CustomRendererでshouldRenderAsClusterをオーバーライドします。
1 2 3 4 5 | @Override protectedbooleanshouldRenderAsCluster(Cluster cluster){ // アイテムが5個以上ならクラスタ化 returncluster.getSize()>4; } |
クラスタのクリックイベントを拾う
アクティビティもしくはフラグメントで、onClusterClickをオーバーライドします。
下記のコードでは、クラスタ内の1番目のアイテムを取得し、その位置にカメラを移動しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | publicclassSampleActivity extendsActivity implementsOnMapReadyCallback,ClusterManager.OnClusterClickListener<MyItem>{ privateGoogleMap mGoogleMap; privateClusterManager<MyItem>mClusterManager; @Override protectedvoidonCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.activity_sample); MapView mapView=findViewById(R.id.map_view); mapView.getMapAsync(this); mClusterManager=newClusterManager<MyItem>(this,mGoogleMap); mClusterManager.setRenderer(newCustomRenderer(this,mGoogleMap,mClusterManager)); mGoogleMap.setOnMarkerClickListener(mClusterManager); mClusterManager.setOnClusterClickListener(this); } @Override publicvoidonMapReady(GoogleMap map){ if(mGoogleMap!=null){ return; } mGoogleMap=map; } @Override publicbooleanonClusterClick(Cluster<MyItem>cluster){ try{ CameraPosition cameraPosition=newCameraPosition.Builder() .target(cluster.getItems().iterator().next().getPosition()) .zoom(10) .build(); mGoogleMap.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition)); }catch(Exceptione){ e.printStackTrace(); } returntrue; } } |
さいごに
いかがでしたでしょうか。
Android Studioでさくっとビルドして、挙動を見つつコードを確認できますので、興味がある方はドキュメントだけでなく、公式のデモアプリに触ってみることをおすすめします。