Android 百度地图marker中图片不显示的解决方法(推荐)
目的:
根据提供的多个经纬度,显示所在地的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); } ivate 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(); } }
在对未知进行探索时,一点是兴奋的,两点是开心的,三点是积极的,太多太多的点则是痛苦的,而解决了迷惑之后内心是舒坦的!
栏 目:Android代码
下一篇:Android开发实现Launcher3应用列表修改透明背景的方法
本文标题:Android 百度地图marker中图片不显示的解决方法(推荐)
本文地址:http://www.codeinn.net/misctech/53171.html