为地图marker 设置网络图片

最新推荐文章于 2026-02-23 00:23:44 发布

原创最新推荐文章于 2026-02-23 00:23:44 发布 · 6.2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Android应用开发

本文介绍如何在地图应用中为marker设置网络图片。通过监听图片加载完成，利用Glide库加载图片并转换为bitmap，然后赋值给marker的icon。同时提到了实现圆形图片的方法，推荐使用CircleImageView开源库，该库的使用包括添加依赖和在布局文件中引用。

使用自定义marker加载本地图片：

Marker marker = aMap.addMarker(new MarkerOptions()
                                .anchor(0.5f,0.5f)
                                .position(latLng)
                                .snippet(dto.getRecipientName())
                                .visible(true));
                                .icon(BitmapDescriptorFactory.fromPath(userAvatar)));

加载网络图片的话，需要给图片设置url在正常显示后，然后设置给marker；
也就需要监听图片的加载，在加载成功后给marker设置icon即可。
这里加载图片使用的是glide。

Glide.with(mContex)
    .placeHolder(int)
    .error(int)
    .into();

实例代码：

                              Glide.with(mContext)
                                   .load(userAvatar)
                                   //等待状态图片
                                   .placeholder(R.drawable.pupu)  
                                   //加载失败图片
                                   .error(R.drawable.pupu)
                                   .into(
                                           new GlideDrawableImageViewTarget(imageView) {
                                               @Override
                                               public void onResourceReady(GlideDrawable drawable, GlideAnimation anim) {
                                                   super.onResourceReady(drawable, anim); 
                                                   //为marker设置已加载完成的图片对象
                                                   marker.setIcon(BitmapDescriptorFactory.fromBitmap(getViewBitmap(view)));
                                               }
                                           }
                                   );

getViewBitmap(view)是将view转成bitmap对象。

view对象：

      View view = LayoutInflater.from(mContext).inflate( R.layout.marker, null);

R.layout.marker 很简单

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="wrap_content"
    android:layout_height="wrap_content">
<imageview
    android:id="@+id/iv"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:background="@drawable/pupu"
     />
</linearlayout>

接着再看getViewBitmap(view) 做了哪些工作？

  /**
     *把View转换成Bitmap类型
     *@paramaddViewContent要转换的View
     *@return
     */
    public   Bitmap getViewBitmap(View addViewContent) {
        addViewContent.setDrawingCacheEnabled(true);
        addViewContent.measure(
                View.MeasureSpec.makeMeasureSpec(0,
                        View.MeasureSpec.UNSPECIFIED),
                View.MeasureSpec.makeMeasureSpec(0,
                        View.MeasureSpec.UNSPECIFIED));
        addViewContent.layout(0,0,
                addViewContent.getMeasuredWidth(),
                addViewContent.getMeasuredHeight());


        addViewContent.buildDrawingCache();
        Bitmap cacheBitmap = addViewContent.getDrawingCache();
        Bitmap bitmap = Bitmap.createBitmap(cacheBitmap);
        return bitmap;
    }

至此，功能代码已完全展示。
想要加载圆形图片？
方式一：自定义
方式二：
开源自定义控件
这里使用的是CircleImageView
https://github.com/hdodenhof/CircleImageView
使用很简单：
1.在buildle.gradle中添加依赖：

dependencies {
    ...
    compile 'de.hdodenhof:circleimageview:2.1.0'
}

2.布局文件中引用即可。

    <de.hdodenhof.circleimageview.CircleImageView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/iv"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:src="@drawable/pupu"
        app:civ_border_width="2dp"
        app:civ_border_color="#FF000000"/>

标签

#地图