如何在圆形语音气泡内制作带有照片的谷歌地图标记？

Posted 2023-05-07

【中文标题】如何在圆形语音气泡内制作带有照片的谷歌地图标记？

【英文标题】：How to make a Google Map Marker with a photo inside round speech-bubble?

【发布时间】：2018-10-13 01:39:03

【问题描述】：

我已经搜索了足够多，但还没有找到。如何使用照片制作 GoogleMaps Marker 示例：

我想我会将 2 个标记放在同一个地方，一个带有标记的图像，另一个带有照片，但我认为这不是最好的做法。有人可以帮我吗？

【问题讨论】：

stackverflow.com 仅提供英文版，请查看 es.***.com 或 pt.***.com（抱歉，我不确定您在帖子中使用的语言）。

【参考方案1】：

这个答案与我的other answer here 相似，但是，由于图像周围的圆形气泡，这有所不同。

首先，确保您拥有最新版本的毕加索：

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

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

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：

    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) 

    
;

结果：