3

(サーバーからダウンロードした) 画像を Google マップのマップ マーカーとして表示しようとしています。Google Map-Utils のパフォーマンスに満足できなかったため、Android-Maps-Extensions を使用しています。

今、AMEでマップマーカー画像を非同期にロードする方法を考えています。タスクは、クラスターでない場合に画像自体を表示することです。クラスターであれば、最初のマーカーの画像とクラスター内の要素数を表示したいです。

この時点までに、次のことを行いました。

1) マップ クラスタラーのセットアップ

private void setupMapClusterer() {
    mClusterOptions = new EClusterOptionsProvider(getContext());
    ClusteringSettings clusteringSettings = new ClusteringSettings();
    clusteringSettings.addMarkersDynamically(true);
    clusteringSettings.clusterOptionsProvider(mClusterOptions);
    mMap.setClustering(clusteringSettings);
}

2) クラスター オプション プロバイダーを作成する

public EClusterOptionsProvider(Context context) {
    mClusterOptions = new ClusterOptions();
    mContext = context;
    mIconGenerator = new IconGenerator(context);

    // Inflate Layout
    View markerView = LayoutInflater.from(context).inflate(R.layout.map_marker, null);
    mImageView = (ImageView) markerView.findViewById(R.id.map_marker_image);
    mTextView = (TextView) markerView.findViewById(R.id.map_marker_text);

    // Setup Icon Generator
    mIconGenerator.setContentView(markerView);
}

public Bitmap createIcon(Bitmap bmp, String text) {
    mImageView.setImageBitmap(bmp);
    mTextView.setText(text);
    return mIconGenerator.makeIcon();
}

@Override
public ClusterOptions getClusterOptions(List<Marker> list) {
    // Get Bitmap from first marker
    Marker first = list.get(0);
    mClusterOptions.icon(BitmapDescriptorFactory.fromBitmap(mIconGenerator.makeIcon()));
    return mClusterOptions;
}

これにより、クラスターにカスタム ビューがあるマップが表示されますが (これは正しい)、画像をダウンロードする場所と、それらを単一のマーカー、特にクラスターに配置する方法がわかりません。

もちろん、事前にすべての画像をダウンロードしたくはありません (500 以上の画像について話しています)。

サイドノード: Volley を使用して画像を非同期的にダウンロードしています。

4

1 に答える 1

3

クラスタリングを使用してマーカーを非同期にロードする簡単な例を作成しました。
ここで役立つものを見つけていただければ幸いです。https://github.com/pengrad/android-maps-async-markers

アイコンを Glide で読み込みます。Picasso よりも安定しています。
マップに追加するすべてのマーカーに対して loadIconMarker を呼び出します。

MarkerOptions markerOptions = ...
// you should pass some icon before new loaded, or leave default one
//markerOptions.icon(BitmapDescriptorFactory.fromResource(R.drawable.default_marker));
Marker marker = mMap.addMarker(markerOptions);
loadMarkerIcon(marker);


private void loadMarkerIcon(final Marker marker) {
    Glide.with(this).load("http://www.myiconfinder.com/uploads/iconsets/256-256-a5485b563efc4511e0cd8bd04ad0fe9e.png")
            .asBitmap().fitCenter().into(new SimpleTarget<Bitmap>() {
        @Override
        public void onResourceReady(Bitmap bitmap, GlideAnimation<? super Bitmap> glideAnimation) {
            BitmapDescriptor icon = BitmapDescriptorFactory.fromBitmap(bitmap);
            marker.setIcon(icon);
        }
    });
}

ClusterIcon の作成は少し難しくなります。これは私の ClusterOptionsProvider です。
ベース ビットマップを使用R.drawable.m1し、クラスター内のマーカーの数を表すテキストを追加します。

public class ClusterIconProvider implements ClusterOptionsProvider {

    Resources resources;
    Paint paint;
    Bitmap base;

    public ClusterIconProvider(Resources resources) {
        this.resources = resources;

        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.WHITE);
        paint.setTextAlign(Paint.Align.CENTER);
        paint.setTextSize(15);

        base = BitmapFactory.decodeResource(resources, R.drawable.m1);
    }

    @Override
    public ClusterOptions getClusterOptions(List<Marker> list) {
        Bitmap bitmap = base.copy(Bitmap.Config.ARGB_8888, true);

        Rect bounds = new Rect();
        String text = String.valueOf(list.size());
        paint.getTextBounds(text, 0, text.length(), bounds);
        float x = bitmap.getWidth() / 2.0f;
        float y = (bitmap.getHeight() - bounds.height()) / 2.0f - bounds.top;

        Canvas canvas = new Canvas(bitmap);
        canvas.drawText(text, x, y, paint);
        BitmapDescriptor icon = BitmapDescriptorFactory.fromBitmap(bitmap);

        return new ClusterOptions().anchor(0.5f, 0.5f).icon(icon);
    }
}
于 2015-08-28T20:48:36.517 に答える