【问题标题】:Custom marker with user image inside the pin带有用户图像的自定义标记在图钉内
【发布时间】:2016-09-04 08:59:05
【问题描述】:

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

知道怎么做吗?

【问题讨论】:

  • 你见过this Marker 对象的图标属性
  • 我看到了,但没有足够的帮助

标签: android marker


【解决方案1】:

我通过参考 Telegram 应用程序 Telegram App

完成了这项工作

在谷歌地图中添加标记

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

【讨论】:

  • 如果你的头像是Square,它会是什么样子? @Ketan Ramani
  • @ArnoldBrown 我刚刚处理了这个示例。您可以尝试检查并进行相应调整
【解决方案2】:

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

private static final LatLng mArea= new LatLng(lat, long);
private Marker marker= mMap.addMarker(new MarkerOptions()
                            .position(mArea)
                            .title("mArea")
                            .snippet("Snippet").icon(yourBitmap));

【讨论】:

  • 你能写一个简单的位图代码来得到我想要的吗? ..谢谢你
  • stackoverflow.com/questions/14811579/… 要么你需要使用画布创建自定义位图,要么你可以简单地通过webservice获取它
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-01-06
  • 1970-01-01
相关资源
最近更新 更多