带有标记的用户图像的自定义标记 [英] Custom marker with user image inside the pin

问题描述

我试图在地图上显示用户，我已经在应用程序中实现了地图，但是现在我试图制作自定义标记，以便在图钉中显示用户的照片，如下所示:

I am trying to display users on a map, I have already implemented the map in the app, but now I am trying to make custom markers that display a user's photo inside the pin something like this:

有什么想法吗?

推荐答案

我是通过从Telegram应用程序电报应用

I have done this by taking reference from Telegram app Telegram App

在Google Map中添加标记

Add Marker in Google Map

GoogleMap mMap;
Marker marker;

LatLng latLng = new LatLng(Double.parseDouble(lat), Double.parseDouble(long));
MarkerOptions options = new MarkerOptions().position(latLng);
Bitmap bitmap = createUserBitmap();
if(bitmap!=null){
    options.title("Ketan Ramani");
    options.icon(BitmapDescriptorFactory.fromBitmap(bitmap));
    options.anchor(0.5f, 0.907f);
    marker = mMap.addMarker(options);
    mMap.moveCamera(CameraUpdateFactory.newLatLng(latLng));
    mMap.animateCamera(CameraUpdateFactory.zoomTo(15), 2000, null);
}

创建位图的功能

private Bitmap createUserBitmap() {
    Bitmap result = null;
    try {
        result = Bitmap.createBitmap(dp(62), dp(76), Bitmap.Config.ARGB_8888);
        result.eraseColor(Color.TRANSPARENT);
        Canvas canvas = new Canvas(result);
        Drawable drawable = getResources().getDrawable(R.drawable.livepin);
        drawable.setBounds(0, 0, dp(62), dp(76));
        drawable.draw(canvas);

        Paint roundPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        RectF bitmapRect = new RectF();
        canvas.save();

        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.avatar);
        //Bitmap bitmap = BitmapFactory.decodeFile(path.toString()); /*generate bitmap here if your image comes from any url*/
        if (bitmap != null) {
            BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
            Matrix matrix = new Matrix();
            float scale = dp(52) / (float) bitmap.getWidth();
            matrix.postTranslate(dp(5), dp(5));
            matrix.postScale(scale, scale);
            roundPaint.setShader(shader);
            shader.setLocalMatrix(matrix);
            bitmapRect.set(dp(5), dp(5), dp(52 + 5), dp(52 + 5));
            canvas.drawRoundRect(bitmapRect, dp(26), dp(26), roundPaint);
        }
        canvas.restore();
        try {
            canvas.setBitmap(null);
        } catch (Exception e) {}
    } catch (Throwable t) {
        t.printStackTrace();
    }
    return result;
}

根据设备密度计算dp

Calculate dp according to device density

public int dp(float value) {
    if (value == 0) {
        return 0;
    }
    return (int) Math.ceil(getResources().getDisplayMetrics().density * value);
}

livepin.png

avatar.png

这篇关于带有标记的用户图像的自定义标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！