Android 百度地图marker中图片不显示的解决方案

ganshenml

墨衍会员 · AI 创作全网分发码龄16年

关注

原创最新推荐文章于 2025-10-25 13:43:53 发布 7.4k 阅读 AI 写同款· GEO 优化 ›

Android百度地图开发上面是我一个项目中使用的到的关于百度地图的一些功能，其实百度地图sdk非常强大，可以做很多事情，上面我用到的都是很简单的东西，仅仅是记录一下一段时间的练习内容！阅读详情

目的：

根据提供的多个经纬度，显示所在地的marker样式，如下：

问题：

1.发现marker中在线加载的图片无法显示出来；

2.获取多个对象后，却只显示出了一个marker；

以下为官网实现方法：

通过查阅百度官网的文档，我们可以知道，地图标注物的实现方法如下：

//定义Maker坐标点  
LatLng point = new LatLng(39.963175, 116.400244);  
//构建Marker图标  
BitmapDescriptor bitmap = BitmapDescriptorFactory  
    .fromResource(R.drawable.icon_marka);  
//构建MarkerOption，用于在地图上添加Marker  
OverlayOptions option = new MarkerOptions()  
    .position(point)  
    .icon(bitmap);  
//在地图上添加Marker，并显示  
mBaiduMap.addOverlay(option);

那么想通过更改marker的样式，也就是option中的.icon(BitmapDescriptor)方法，只需要提供BitmapDescriptor对象即可，获取BitmapDescriptor的方式有如下几种：

（查询地址：http://wiki.lbsyun.baidu.com/cms/androidsdk/doc/v4_3_0/index.html）

因为是marker不是简单的图片展示，所以这里是需要自定义view给加载进来的，因此使用的是fromView()来加载自定义视图，视图内容如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="30dp"
    android:id="@+id/bitmapFl"
    android:layout_height="44dp">

    <ImageView
        android:layout_width="30dp"
        android:layout_height="44dp"
        android:layout_gravity="center"
        android:src="@mipmap/anchor"/>

    <ImageView
        android:id="@+id/picSdv"
        android:layout_marginTop="1dp"
        android:layout_width="28dp"
        android:layout_height="28dp"
        android:layout_gravity="center_horizontal"
        />

</FrameLayout>

但是如果此时使用fromView来加载视图生成BitmapDescriptor就会导致：在图片未在线加载完毕时，整个view就已经生成了BitmapDescriptor，这个时候就出现了marker无法显示图片的问题（这就好比经典招数“猴子偷桃”，桃都还没有，怎么偷得出来呢）。所以解决的办法是——>等到图片加载完毕后再去生成BitmapDescriptor，从而设置MarkerOptions。

下面为我的解决方案：

以下是在fragment中加载以上的视图文件：（具体业务情况看个人的页面设计，所以使用的时候也不一定非得在这个方法里面初始化）

  @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        this.inflater = inflater;
        this.container = container;
        if (markerView == null) {
            viewHolder = new ViewHolder();
            markerView = (FrameLayout) inflater.inflate(R.layout.layout_bitmap_descriptor, container, true).findViewById(R.id.bitmapFl);//此处一定要find到bitmapFl，否则此处会报错加载的对象不是要求的布局对象
            viewHolder.imageView = (ImageView) markerView.findViewById(R.id.picSdv);
            markerView.setTag(viewHolder);
        }
        return inflater.inflate(R.layout.fragment_main, container, false);
    }

private class ViewHolder {
        ImageView imageView;
    }

因为涉及到多个marker的加载，意味着要对布局进行多次加载，所以此处使用ViewHolder来处理重复的操作。

然后进行初始化各个marker：

   /**
     * 初始化位置标注信息
     *
     * @param geoUserEntities:地理用户数据（包含头像地址、经纬度）
     */
    private void initOverlayOptions(List<GeoUserEntity> geoUserEntities) {
        baiduMap.clear();

        AvatarEntity avatarEntityTemp;
        for (int i = 0; i < geoUserEntities.size(); i++) {
            if (geoUserEntities.get(i) == null) {
                continue;
            }
            final Marker[] marker = {null};
            final GeoUserEntity geoUserEntityTemp = geoUserEntities.get(i);
            avatarEntityTemp = geoUserEntityTemp.getAvatar();
            final BitmapDescriptor[] pic = {null};
            if (avatarEntityTemp != null && !StringUtils.isEmpty(avatarEntityTemp.getImageUrl())) {
                returnPicView(avatarEntityTemp.getMid(), new ResultListener() {//图片加载完毕后的回调方法
                    @Override
                    public void onReturnResult(Object object) {
                        super.onReturnResult(object);
                        pic[0] = BitmapDescriptorFactory.fromView((View) object);
                        putDataToMarkerOptions(pic[0], geoUserEntityTemp);
                    }
                });

            } else if (avatarEntityTemp == null) {
                pic[0] = BitmapDescriptorFactory.fromResource(R.mipmap.anchor);
                putDataToMarkerOptions(pic[0], geoUserEntityTemp);
            }
        }
    }


    /**
     * 显示marker，设置marker传递的数据
     *
     * @param pic
     * @param geoUserEntityTemp
     */
    private void putDataToMarkerOptions(BitmapDescriptor pic, GeoUserEntity geoUserEntityTemp) {
        double[] locationTemp = geoUserEntityTemp.getLocation();
        if (locationTemp != null && locationTemp.length == 2) {
            LatLng point = new LatLng(locationTemp[1], locationTemp[0]);
            MarkerOptions overlayOptions = new MarkerOptions()
                    .position(point)
                    .icon(pic)
                    .animateType(MarkerOptions.MarkerAnimateType.grow);//设置marker从地上生长出来的动画

            Marker marker = (Marker) baiduMap.addOverlay(overlayOptions);
            Bundle bundle = new Bundle();
            bundle.putSerializable(ConstantValues.User.GEO_USER_ENTITY, geoUserEntityTemp);
            marker.setExtraInfo(bundle);//marker点击事件监听时，可以获取到此时设置的数据
            marker.setToTop();
        }
    }
    

    private void returnPicView(String urlTemp, final ResultListener resultListener) {
        viewHolder = (ViewHolder) markerView.getTag();
        Glide.with(getContext())
                .load(urlTemp)
                .asBitmap()
                .transform(new GlideCircleTransform(getContext()))
                .into(new SimpleTarget<Bitmap>() {
                          @Override
                          public void onResourceReady(Bitmap bitmap, GlideAnimation glideAnimation) {
                              viewHolder.imageView.setImageBitmap(bitmap);
                              resultListener.onReturnResult(markerView);
                          }
                      }
                );
    }

通过returnPicView方法来进行异步图片加载，然后用自定义的ResultListener接口来回调图片加载完毕的结果，从而初始化BitmapDescriptor，进而设置MarkerOptions。

要点：

GlideCircleTransform是自定义的类，用来设置图片为圆形（之后有实现方法）；
onResourceReady是Glide框架中监听图片加载完毕的回调方法，以上的实现能监听多张图片加载完毕的事件；
resultListener.onReturnResult(markerView);中的markerView是一开始自定义的marker中要加载的整个布局；
为啥不用SimpleDraweeView来实现圆形图片并进行图片下载的监听？

仅个人的使用情况：使用Glide框架无法控制SimpleDraweeView的形状；而且，SimpleDraweeView无法监听动态加载同一个view时的多张图片下载的情况，意味着只能监听到最后最后一张图片。（也就是，类似于上面的onReturnResult方法只会回调一次，这也就是本文开头提到过的问题②：获取多个对象后，却只显示出了一个marker的情况）

然后，附上GlideCircleTransform的类代码（从其它处拷贝过来的）：

public class GlideCircleTransform extends BitmapTransformation {
    public Context context;

    public GlideCircleTransform(Context context) {
        super(context);
        this.context = context;
    }

    @Override
    protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
        return circleCrop(pool, toTransform);
    }

    private static Bitmap circleCrop(BitmapPool pool, Bitmap source) {
        if (source == null) return null;
        int size = Math.min(source.getWidth(), source.getHeight());
        int x = (source.getWidth() - size) / 2;
        int y = (source.getHeight() - size) / 2;
        // TODO this could be acquired from the pool too
        Bitmap squared = Bitmap.createBitmap(source, x, y, size, size);
        Bitmap result = pool.get(size, size, Bitmap.Config.ARGB_8888);
        if (result == null) {
            result = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
        }
        Canvas canvas = new Canvas(result);
        Paint paint = new Paint();
        paint.setShader(new BitmapShader(squared, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
        paint.setAntiAlias(true);
        float r = size / 2f;
        canvas.drawCircle(r, r, r, paint);

        return result;
    }

    @Override
    public String getId() {
        return getClass().getName();
    }
}

在对未知进行探索时，一点是兴奋的，两点是开心的，三点是积极的，太多太多的点则是痛苦的，而解决了迷惑之后内心是舒坦的！

收录于