如何在圆形语音气泡中用照片制作Google Map Marker? [英] How to make a Google Map Marker with a photo inside round speech-bubble?

问题描述

我已经搜索了足够的东西，但是还没有找到它.如何用照片制作GoogleMaps标记示例:

I've searched enough but have not found it yet. How to make a GoogleMaps Marker with a photo Example:

我以为我会在同一位置放置2个标记，一个标记图像，另一个标记与照片，但是我认为这不是最好的做法.有人可以帮我吗?

I thought I would put 2 markers in the same place one with the image of the marker and another with the photo, but I think it is not the best to do do. Can someone help me?

推荐答案

此答案类似于我的此处的其他答案 ，但是，由于图像周围有圆形气泡，因此有所不同.

This answer is similar to my other answer here, however, this is different due to the round bubble around the image.

首先，请确保您具有最新版本的毕加索:

First, ensure you have the latest version of Picasso:

dependencies {
    compile 'com.squareup.picasso:picasso:2.71828'
    //....
}

这是一个转换，可在图像周围创建圆形气泡和底部三角形:

Here is a transformation that creates the round bubble and bottom triangle around the image:

import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Shader;

public class CircleBubbleTransformation implements com.squareup.picasso.Transformation {
    private static final int photoMargin = 30;
    private static final int margin = 20;
    private static final int triangleMargin = 10;

    @Override
    public Bitmap transform(final Bitmap source) {
        int size = Math.min(source.getWidth(), source.getHeight());
        float r = size/2f;

        Bitmap output = Bitmap.createBitmap(size+triangleMargin, size+triangleMargin, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        Paint paintBorder = new Paint();
        paintBorder.setAntiAlias(true);
        paintBorder.setColor(Color.parseColor("#333030"));
        paintBorder.setStrokeWidth(margin);
        canvas.drawCircle(r, r, r-margin, paintBorder);

        Paint trianglePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        trianglePaint.setStrokeWidth(2);
        trianglePaint.setColor(Color.parseColor("#333030"));
        trianglePaint.setStyle(Paint.Style.FILL_AND_STROKE);
        trianglePaint.setAntiAlias(true);
        Path triangle = new Path();
        triangle.setFillType(Path.FillType.EVEN_ODD);
        triangle.moveTo(size-margin, size / 2);
        triangle.lineTo(size/2, size+triangleMargin);
        triangle.lineTo(margin, size/2);
        triangle.close();
        canvas.drawPath(triangle, trianglePaint);

        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setShader(new BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));
        canvas.drawCircle(r, r, r-photoMargin, paint);

        if (source != output) {
            source.recycle();
        }

        return output;
    }

    @Override
    public String key() {
        return "circlebubble";
    }
}

在此示例中，我从PlaceAutocompleteFragment获取LatLng:

In this example I get the LatLng from a PlaceAutocompleteFragment:

    PlaceAutocompleteFragment placeAutoComplete = (PlaceAutocompleteFragment) getFragmentManager().findFragmentById(R.id.place_autocomplete);
    placeAutoComplete.setOnPlaceSelectedListener(new PlaceSelectionListener() {
        @Override
        public void onPlaceSelected(Place place) {
            Log.d("Maps", "Place selected: " + place.getName());
            mLatLng = place.getLatLng();
            Picasso.get()
                    .load(user_photo_url)
                    .resize(200,200)
                    .centerCrop()
                    .transform(new CircleBubbleTransformation())
                    .into(mTarget);
        }

        @Override
        public void onError(Status status) {
            Log.d("Maps", "An error occurred: " + status);
        }
    });

定义目标:

Target mTarget = new Target() {
    @Override
    public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
        Marker driver_marker = mMap.addMarker(new MarkerOptions()
                .position(mLatLng)
                .icon(BitmapDescriptorFactory.fromBitmap(bitmap))
                .title("test")
                .snippet("test address")
        );
    }

    @Override
    public void onBitmapFailed(Exception ex, Drawable errorDrawable) {
        Log.d("picasso", "onBitmapFailed");
    }

    @Override
    public void onPrepareLoad(Drawable placeHolderDrawable) {

    }
};

结果:

这篇关于如何在圆形语音气泡中用照片制作Google Map Marker?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！