自定义标记与引脚内的用户图像

问题描述 投票:8回答:2

我试图在地图上显示用户,我已经在应用程序中实现了地图,但现在我正在尝试制作自定义标记,在pin内显示用户的照片,如下所示:enter image description here

知道怎么做吗?

android marker
2个回答
8
投票

我通过参考Telegram app Telegram App来做到这一点

在Google地图中添加标记

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

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

livepin.png

avatar.png

Output


1
投票

您可以使用自己的位图自定义标记。

private static final LatLng mArea= new LatLng(lat, long);
private Marker marker= mMap.addMarker(new MarkerOptions()
                            .position(mArea)
                            .title("mArea")
                            .snippet("Snippet").icon(yourBitmap));
© www.soinside.com 2019 - 2024. All rights reserved.