web-dev-qa-db-ja.com

android Maps API v2とカスタムマーカー

カスタムマーカーを使用してマップを作成します。 API v2では、マーカーのアイコン、タイトルなどを設定できます。しかし、最初にマーカーでタイトルを表示したいです。これで、マーカーをタップしたときにのみタイトルが表示されます。 v1にはオーバーレイがありましたが、v2には似たようなものは見つかりませんでした。

編集:たぶん私は十分に明確ではありませんでした。 APIのMarker.showInfoWindow()のようなものは、1つのマーカーに対してのみ機能します。すべてのマーカーの情報ウィンドウを同時に表示することはできません。とにかく、ユーザーがタップするまで待たずに、すべてのマーカーのタイトルを表示する必要があります。

65
jumper0k

私もこの問題に出くわしました。 V2 APIは1歩前進、2歩後退です。 Google、マーカーまたはGoogleMapクラスにオーバーライド可能な「描画」メソッドを追加して、描画を自分でカスタマイズできるようにしてください。

可能な解決策は、その場でビットマップを生成し、マーカーに添付することです。つまり、キャンバスを作成し、マーカービットマップを挿入し、マーカーの横にテキストを描画します。これには、いくつかの苦痛な計算が含まれます(マーカービットマップとテキストが隣り合う適切なキャンバスサイズ)。残念ながら、MarkerにはsetIconメソッドがないため、テキストが変更されるたびに新しいマーカーを作成する必要があります。マップ上にマーカーがあるだけでも問題ありませんが、数十個のマーカーがある場合、これは実行不可能な場合があります。また、これらのビットマップを動的に作成する際にメモリの問題がある可能性があります。サンプルコード(テキストのみ):

Bitmap.Config conf = Bitmap.Config.ARGB_8888; 
Bitmap bmp = Bitmap.createBitmap(200, 50, conf); 
Canvas canvas = new Canvas(bmp);

canvas.drawText("TEXT", 0, 50, Paint); // Paint defines the text color, stroke width, size
mMap.addMarker(new MarkerOptions()
                                .position(clickedPosition)
                                //.icon(BitmapDescriptorFactory.fromResource(R.drawable.marker2))
                                .icon(BitmapDescriptorFactory.fromBitmap(bmp))
                                .anchor(0.5f, 1)
                                    );

Googleが適切なメソッドを追加して、これを簡単に行えることを願っています。くそー、私はV2 APIの新しいマップ回転機能が本当に好きです。

83
azgolfer

最後にやった。だからあなたがしていることは背景画像を持っていることです(私の場合は青い長方形を使用しています)。次のようなマーカーを作成します。

Marker myLocMarker = map.addMarker(new MarkerOptions()
            .position(myLocation)
            .icon(BitmapDescriptorFactory.fromBitmap(writeTextOnDrawable(R.drawable.bluebox, "your text goes here"))));

WriteTextOnDrawable()メソッドに注目してください。

private Bitmap writeTextOnDrawable(int drawableId, String text) {

    Bitmap bm = BitmapFactory.decodeResource(getResources(), drawableId)
            .copy(Bitmap.Config.ARGB_8888, true);

    Typeface tf = Typeface.create("Helvetica", Typeface.BOLD);

    Paint paint = new Paint();
    Paint.setStyle(Style.FILL);
    Paint.setColor(Color.WHITE);
    Paint.setTypeface(tf);
    Paint.setTextAlign(Align.CENTER);
    Paint.setTextSize(convertToPixels(context, 11));

    Rect textRect = new Rect();
    Paint.getTextBounds(text, 0, text.length(), textRect);

    Canvas canvas = new Canvas(bm);

    //If the text is bigger than the canvas , reduce the font size
    if(textRect.width() >= (canvas.getWidth() - 4))     //the padding on either sides is considered as 4, so as to appropriately fit in the text
        Paint.setTextSize(convertToPixels(context, 7));        //Scaling needs to be used for different dpi's

    //Calculate the positions
    int xPos = (canvas.getWidth() / 2) - 2;     //-2 is for regulating the x position offset

    //"- ((Paint.descent() + Paint.ascent()) / 2)" is the distance from the baseline to the center.
    int yPos = (int) ((canvas.getHeight() / 2) - ((Paint.descent() + Paint.ascent()) / 2)) ;  

    canvas.drawText(text, xPos, yPos, Paint);

    return  bm;
}



public static int convertToPixels(Context context, int nDP)
{
    final float conversionScale = context.getResources().getDisplayMetrics().density;

    return (int) ((nDP * conversionScale) + 0.5f) ;

}

Arun Georgeに感謝します。 プログラムでAndroidの画像にテキストを追加

48
JY2k

あなたの質問は、Google I/Oセッションでようやく回答されたようです。

http://googlemaps.github.io/Android-maps-utils/ をご覧ください

次のものがあります。

マーカークラスタリング—多数のポイントの表示を処理します

ヒートマップ—ヒートマップとして多数のポイントを表示します

IconGenerator —マーカーにテキストを表示(スクリーンショットを参照)

Markers made using the library

非常に重要なことは、anyスレッドで変更できるため、多くのマーカーを簡単に処理できることです。

15
vedant

どちらを達成しようとしているのかわかりません:ユーザーがマーカーをタップすることなく情報ウィンドウを表示するか、情報ウィンドウにまったく異なるビューを使用します(あるいはその両方)。

ユーザーをタップせずに情報ウィンドウを表示するには:

私はこれを自分でテストしていませんが、 Marker.showInfoWindow() がうまくいくと推測しています(マーカーの可視性がすでにtrueであると仮定しています)。

InfoWindowにカスタムビューを提供するには

ここには2つのオプションがあり、 GoogleMap.InfoWindowAdapter のドキュメントを参照する必要があります。

パブリックスタティックインターフェイスGoogleMap.InfoWindowAdapter

情報ウィンドウのカスタマイズされたレンダリングのビューを提供します。

このプロバイダーのメソッドは、原因(ユーザージェスチャまたはshowInfoWindow()のプログラム呼び出し)に関係なく、マーカーの情報ウィンドウを表示するときに呼び出されます。一度に表示される情報ウィンドウは1つだけなので、このプロバイダーは、ビューを再利用するか、各メソッド呼び出しで新しいビューを作成することを選択できます。

情報ウィンドウを構築するとき、このクラスのメソッドは定義された順序で呼び出されます。デフォルトの情報ウィンドウを置き換えるには、カスタムレンダリングでgetInfoWindow(Marker)をオーバーライドします。デフォルトの情報ウィンドウフレーム(吹き出し)内の情報ウィンドウのコンテンツのみを置き換えるには、getInfoWindow(Marker)のデフォルトの実装をそのままにして、代わりにgetInfoContents(Marker)をオーバーライドします。

基本的に、getInfoWindow()またはgetInfoContents()をオーバーライドするかどうかは、吹き出し内に表示されるものをカスタマイズするだけか、情報ウィンドウビュー全体をカスタマイズするかどうかに依存します。吹き出しに。

1つの注意点:これらのメソッドをオーバーライドすると、getInfoWindow()またはgetInfoContents()が呼び出された時点でビューがどのように見えるかの簡単なレンダリングが実行されると思います。私自身は、場所の名前の横に小さな「方向」アイコンがあるネイティブGoogleマップAndroidアプリの外観を再現しようとしています。私が信じる問題の1つ(ここを参照: https://stackoverflow.com/a/13713536/129475 )は、ビューにボタンのようなものがあると、静的なレンダリングのためのボタン。

9
Bryce Thomas

マーカー画像をカスタマイズする

デフォルトのマーカー画像を、アイコンとも呼ばれるカスタムマーカー画像に置き換えることができます。カスタムアイコンは常にBitmapDescriptorとして設定され、BitmapDescriptorFactoryクラスの4つのメソッドのいずれかを使用して定義されます。

fromAsset(String assetName)アセットディレクトリ内の画像を使用してカスタムマーカーを作成します。

fromBitmap(ビットマップイメージ)ビットマップイメージからカスタムマーカーを作成します。

fromFile(String path)指定されたパスにあるファイルからカスタムアイコンを作成します。

fromResource(int resourceId)既存のリソースを使用してカスタムマーカーを作成します。以下のスニペットは、カスタムアイコンでマーカーを作成します。

 private static final LatLng MELBOURNE = new LatLng(-37.813, 144.962);
 private Marker melbourne = mMap.addMarker(new MarkerOptions()
                        .position(MELBOURNE)
                        .title("Melbourne")
                        .snippet("Population: 4,137,400")
                        .icon(BitmapDescriptorFactory.fromResource(R.drawable.arrow)));
4
sujith s

この単純なコードは、クリックイベントを必要とせずにタイトルを表示するために機能します。

googleMap.addMarker(new MarkerOptions()
        .position(latLng)
        .title(String title))
        .showInfoWindow();
1
Cohen

Googleは、カスタムアイコンを簡単に追加できるIconGeneratorクラスを発表しました。

IconGenerator iconGenerator = new IconGenerator(mContext);
Bitmap bitmap = iconGenerator.makeIcon("Text Of Icon");
mMap.addMarker(new MarkerOptions()
                      .position(latlng)
                      .title("Location")
                      .icon(BitmapDescriptorFactory.fromBitmap(bitmap)));
0

マーカーの配列を保持して、マーカーをロードするときに、showInfoWindow()を呼び出してマーカーを反復処理してみませんか。最もエレガントなソリューションではないかもしれませんが、それはあなたが言っていることだと思います。

0
StuStirling