android 动态生成图片不显示不出来,Android 百度地图marker中图片不显示的解决方案...

目的:

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

325d975dc8ef?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

问题:

①发现marker中在线加载的图片无法显示出来;

②获取多个对象后,却只显示出了一个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的方式有如下几种:

325d975dc8ef?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

Paste_Image.png

(查询地址:http://wiki.lbsyun.baidu.com/cms/androidsdk/doc/v4_3_0/index.html)

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

android:layout_width="30dp"

android:id="@+id/bitmapFl"

android:layout_height="44dp">

android:layout_width="30dp"

android:layout_height="44dp"

android:layout_gravity="center"

android:src="@mipmap/anchor"/>

android:id="@+id/picSdv"

android:layout_marginTop="1dp"

android:layout_width="28dp"

android:layout_height="28dp"

android:layout_gravity="center_horizontal"

/>

但是如果此时使用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);

}

ivate class ViewHolder {

ImageView imageView;

}

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

然后进行初始化各个marker:

/**

* 初始化位置标注信息

*

* @param geoUserEntities:地理用户数据(包含头像地址、经纬度)

*/

private void initOverlayOptions(List 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() {

@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();

}

}

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值