Android开发资源分享----实现百度地图复杂气泡实例

下面给大家看一个效果图：

需求描述：要求进入地图页面即显示popoverlay气泡和具体的描述内容，也就是图片中的圆形头像+地址信息，一般情况下，只需要显示坐标点的，比如“A”，“B”等。只有点击的时候才会弹出具体的描述内容。使用SDK：百度地图sdkV2.3.5问题：这种比较复杂的气泡和弹窗，本人也是第一次见到，尤其是还支持圆形头像，由于sdk的demo中提供的示例比较简单，做到如上这些，可是费了不少脑细胞呀！好了，不多说，下面贴出具体的代码：//============================== 1、首先是需要创建覆盖物对象-也就是图上面的圆形头像和名称

需求描述：要求进入地图页面即显示popoverlay气泡和具体的描述内容，也就是图片中的圆形头像+地址信息，一般情况下，只需要显示坐标点的，比如“A”，“B”等。只有点击的时候才会弹出具体的描述内容。

1. <font face="微软雅黑" size="3">/** 创建单点覆盖物
   
2.           * createOverlayItem
   
3.           * @throws
   
4.           */
   
5.         @SuppressWarnings("deprecation")
   
6.         private void createOverlayItem(Device oneDevice){
   
7.                 if(oneDevice!=null && oneDevice.getGeo()!=null){
   
8.                         //这是该覆盖物的坐标--一般来源于服务端
   
9.                         Double[] geo = oneDevice.getGeo();
   
10.                         // 为该坐标点添加覆盖物-通过点击marker的方式弹出pop
    
11.                         GeoPoint stop = new GeoPoint((int) (geo[1] * 1E6),(int) (geo[0] * 1E6));
    
12.                         //将WGS坐标转化为百度坐标
    
13.                         GeoPoint g = CoordinateConvert.fromWgs84ToBaidu(stop);
    
14.                         //实例化该覆盖物--注意该方法的构造参数
    
15.                         OverlayItem item1 = new OverlayItem(g, oneDevice.getAddress()+"/"+oneDevice.getDirection()+"/"+oneDevice.getSpeed(),""+oneDevice.getCreate_time());
    
16.                         //这就是头像的base64格式的字符串，一般来源于服务端
    
17.                         String pic = oneDevice.getPic();
    
18. </font>                        <font face="微软雅黑" size="3">
    
19.                         //设置overlay图标-采用view转化为bitmap的方式
    
20.                         //--这是最关键的地方，因为sdk本身不支持直接显示复杂View，所以需要用另外的方式创建，幸好android提供将View转换为bitmap的方法。
    
21.                         View view = mLayoutInflater.inflate(R.layout.custom_foot_marker, null);
    
22.                         TextView tv_name = (TextView) view.findViewById(R.id.tv_name);
    
23.                         ImageView img_pic = (ImageView) view.findViewById(R.id.img_pic);
    
24.                         Bitmap orginBitmap = null;
    
25.                         if (pic != null && !pic.equals("")) {
    
26.                                 orginBitmap =BMapUtil.getBitmap(pic);
    
27.                         }else{
    
28.                                 orginBitmap= BitmapFactory.decodeResource(getResources(), R.drawable.qp_head);
    
29.                         }
    
30.                         //圆形头像
    
31.                         Bitmap roundBitmap= BMapUtil.toRoundBitmap(orginBitmap);
    
32.                         img_pic.setImageBitmap(roundBitmap);
    
33.                         tv_name.setText(oneDevice.getName());
    
34. </font>                        <font face="微软雅黑" size="3">
    
35.                         //这就是将View转换为bitmap-并设置成marker
    
36.                         Bitmap bitmap = BMapUtil.getBitmapFromView(view);
    
37.                         item1.setMarker(new BitmapDrawable(bitmap));
    
38.                         // mOverlay-----这是覆盖物集合--所有的覆盖物的创建都是由他支配的
    
39.                         mOverlay.onCenter(item1);
    
40.                         //添加该覆盖物到集合中
    
41.                         mOverlay.addItem(item1);
    
42.                         //设置地图中心坐标
    
43.                         mMapView.getController().setCenter(g);
    
44. //                        //移动地图到起点
    
45.                     mMapView.getController().animateTo(g);
    
46.                     //回收资源
    
47.                     if(orginBitmap!=null&& !orginBitmap.isRecycled()){
    
48.                             orginBitmap.recycle();
    
49.                     }
    
50.                     if(roundBitmap!=null&& !roundBitmap.isRecycled()){
    
51.                             roundBitmap.recycle();
    
52.                     }
    
53.                     if(bitmap!=null&& !bitmap.isRecycled()){
    
54.                             bitmap.recycle();
    
55.                     }
    
56.                 }else{
    
57.                         ShowToast("暂无数据");
    
58.                 }
    
59.         }
    
60. </font>

复制代码

ps:Device--只是一个封装了头像、名称、地址等属性的实体类，这个可以更改，根据你们的具体需求而定 。

上面的代码中用到的方法也一并贴出：

1. <font face="微软雅黑" size="3">//这是最重要的方法，因为百度默认setMarker的参数只能是Drawable类型，因此需要进行一步转化。
   
2. /**将View转换为Bitmap
   
3.          * @param view
   
4.          * @return
   
5.          */
   
6.         public static Bitmap getBitmapFromView(View view) {
   
7.                 view.destroyDrawingCache();
   
8.                 view.measure(View.MeasureSpec.makeMeasureSpec(0,
   
9.                                 View.MeasureSpec.UNSPECIFIED), View.MeasureSpec
   
10.                                 .makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
    
11.                 view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
    
12.                 view.setDrawingCacheEnabled(true);
    
13.                 Bitmap bitmap = view.getDrawingCache(true);
    
14.                 return bitmap;
    
15.         }
    
16. 
    
17. /**
    
18.          * 根据base64字符串获取Bitmap位图 getBitmap
    
19.          * @throws
    
20.          */
    
21.         public static Bitmap getBitmap(String imgBase64Str) {
    
22.                 try {
    
23.                         byte[] bitmapArray;
    
24.                         bitmapArray = Base64.decode(imgBase64Str, Base64.DEFAULT);
    
25.                         return BitmapFactory.decodeByteArray(bitmapArray, 0,
    
26.                                         bitmapArray.length);
    
27.                 } catch (Exception e) {
    
28.                         e.printStackTrace();
    
29.                 }
    
30.                 return null;
    
31.         }
    
32. 
    
33.     /**
    
34.          * 转换图片成圆形
    
35.          * @param bitmap
    
36.          *            传入Bitmap对象
    
37.          * @return
    
38.          */
    
39.         public static Bitmap toRoundBitmap(Bitmap bitmap) {
    
40.                 int width = bitmap.getWidth();
    
41.                 int height = bitmap.getHeight();
    
42.                 float roundPx;
    
43.                 float left, top, right, bottom, dst_left, dst_top, dst_right, dst_bottom;
    
44.                 if (width <= height) {
    
45.                         roundPx = width / 2;
    
46. 
    
47.                         left = 0;
    
48.                         top = 0;
    
49.                         right = width;
    
50.                         bottom = width;
    
51. 
    
52.                         height = width;
    
53. 
    
54.                         dst_left = 0;
    
55.                         dst_top = 0;
    
56.                         dst_right = width;
    
57.                         dst_bottom = width;
    
58.                 } else {
    
59.                         roundPx = height / 2;
    
60. 
    
61.                         float clip = (width - height) / 2;
    
62. 
    
63.                         left = clip;
    
64.                         right = width - clip;
    
65.                         top = 0;
    
66.                         bottom = height;
    
67.                         width = height;
    
68. 
    
69.                         dst_left = 0;
    
70.                         dst_top = 0;
    
71.                         dst_right = height;
    
72.                         dst_bottom = height;
    
73.                 }
    
74. 
    
75.                 Bitmap output = Bitmap.createBitmap(width, height, Config.ARGB_8888);
    
76.                 Canvas canvas = new Canvas(output);
    
77. 
    
78.                 final Paint paint = new Paint();
    
79.                 final Rect src = new Rect((int) left, (int) top, (int) right,
    
80.                                 (int) bottom);
    
81.                 final Rect dst = new Rect((int) dst_left, (int) dst_top,
    
82.                                 (int) dst_right, (int) dst_bottom);
    
83.                 final RectF rectF = new RectF(dst);
    
84. 
    
85.                 paint.setAntiAlias(true);// 设置画笔无锯齿
    
86. 
    
87.                 canvas.drawARGB(0, 0, 0, 0); // 填充整个Canvas
    
88. 
    
89.                 // 以下有两种方法画圆,drawRounRect和drawCircle
    
90.                 canvas.drawRoundRect(rectF, roundPx, roundPx, paint);// 画圆角矩形，第一个参数为图形显示区域，第二个参数和第三个参数分别是水平圆角半径和垂直圆角半径。
    
91.                 // canvas.drawCircle(roundPx, roundPx, roundPx, paint);
    
92. 
    
93.                 paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));// 设置两张图片相交时的模式
    
94.                 canvas.drawBitmap(bitmap, src, dst, paint); // 以Mode.SRC_IN模式合并bitmap和已经draw了的Circle
    
95. 
    
96.                 return output;
    
97.         }
    
98. </font>

复制代码

下面是custom_foot_marker.xml布局文件：

1. <font face="微软雅黑" size="3">[mw_shl_code=java,true]<?xml version="1.0" encoding="utf-8"?>
   
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3.     android:layout_width="wrap_content"
   
4.     android:layout_height="wrap_content" >
   
5. 
   
6.     <RelativeLayout
   
7.         android:layout_width="65dp"
   
8.         android:layout_height="80dp"
   
9.         android:background="@drawable/marker_foot" >
   
10. 
    
11.         <ImageView
    
12.             android:id="@+id/img_pic"
    
13.             android:layout_width="55dp"
    
14.             android:layout_height="55dp"
    
15.             android:layout_marginTop="5dp"
    
16.             android:layout_centerHorizontal="true"
    
17.             android:scaleType="fitCenter"
    
18.             android:src="@drawable/qp_head"
    
19.             />
    
20.     </RelativeLayout>
    
21. 
    
22.     <TextView
    
23.         android:id="@+id/tv_name"
    
24.         android:layout_width="45dp"
    
25.         android:layout_height="wrap_content"
    
26.         android:layout_gravity="bottom|center_horizontal"
    
27.         android:layout_marginBottom="20dp"
    
28.         android:background="@drawable/marker_text_bg"
    
29.         android:gravity="center_horizontal"
    
30.         android:text="smile"
    
31.         android:textColor="@color/color_white_text"
    
32.         android:textSize="10sp" />
    
33. 
    
34. </FrameLayout>[/mw_shl_code]</font>

复制代码

2、创建popupOverlay对象-这是百度用于创建气泡的类

1. <font face="微软雅黑" size="3">private View popupInfo = null;
   
2.         TextView tv_time;
   
3.         TextView tv_address;
   
4.         TextView tv_rate;//方向和速度
   
5.         PopupOverlay pop;
   
6. 
   
7.         private void initPop() {
   
8.                 /**
   
9.                  * 向地图添加自定义View.
   
10.                  */
    
11.                 View viewCache = mLayoutInflater.inflate(R.layout.custom_replay_window, null);
    
12.                 popupInfo = (View) viewCache.findViewById(R.id.layout_window);
    
13.                 tv_address = (TextView) viewCache.findViewById(R.id.tv_address);
    
14.                 tv_rate = (TextView) viewCache.findViewById(R.id.tv_rate);
    
15.                 tv_time = (TextView) viewCache.findViewById(R.id.tv_time);
    
16. 
    
17.                 /**
    
18.                  * 创建一个popupoverlay
    
19.                  */
    
20.                 PopupClickListener popListener = new PopupClickListener() {
    
21.                         @Override
    
22.                         public void onClickedPopup(int index) {
    
23.                                 action2page(currentIndex);
    
24.                         }
    
25.                 };
    
26.                 pop = new PopupOverlay(mMapView, popListener);
    
27.         }
    
28. </font>

复制代码

这个是custom_replay_window.xml文件：这个没什么

1. <font face="微软雅黑" size="3">[mw_shl_code=java,true]<?xml version="1.0" encoding="utf-8"?>
   
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3.     android:id="@+id/layout_window"
   
4.     android:layout_width="wrap_content"
   
5.     android:layout_height="wrap_content"
   
6.     android:background="@drawable/pop_replay"
   
7.     android:orientation="vertical"
   
8.     android:padding="5dp" >
   
9. 
   
10.     <TextView
    
11.         android:id="@+id/tv_address"
    
12.        style="@style/Smile.TextView._Black"
    
13.         android:textSize="15sp"
    
14.         android:layout_gravity="center_vertical"/>
    
15. </font>   <font face="微软雅黑" size="3">
    
16.     <TextView
    
17.         android:id="@+id/tv_rate"
    
18.         style="@style/Smile.TextView._Orange"
    
19.         android:textSize="15sp"
    
20.         android:layout_gravity="center_vertical"/>
    
21. 
    
22.     <TextView
    
23.         android:id="@+id/tv_time"
    
24.         style="@style/Smile.TextView._Gray"
    
25.         android:layout_marginBottom="15dp"
    
26.         android:textSize="14sp"
    
27.         android:layout_gravity="center_vertical" />
    
28. 
    
29. </LinearLayout>
    
30. [/mw_shl_code]
    
31. 
    
32. //==============================</font>

复制代码

3、创建一个覆盖物集合--通过它去操作具体的覆盖物，比如点击。设置偏移量等

1. <font face="微软雅黑" size="3">/** ItemizedOverlay<OverlayItem> 包含了一个OverlayItem列表，相当于一组分条的Overlay，通过继承此类，将一组兴趣点显示在地图上
   
2.           */
   
3.         public class MyOverlay extends ItemizedOverlay<OverlayItem> {
   
4. 
   
5.                 public MyOverlay(Drawable defaultMarker, MapView mapView) {
   
6.                         super(defaultMarker, mapView);
   
7.                 }
   
8. 
   
9.                 @Override
   
10.                 public boolean onTap(int index) {//通过点击弹出pop
    
11.                         action2page(index);
    
12.                         return true;
    
13.                 }
    
14. 
    
15.                 @Override
    
16.                 public boolean onTap(GeoPoint pt, MapView mMapView) {
    
17.                         return false;
    
18.                 }
    
19. </font>               <font face="微软雅黑" size="3">
    
20.                 /** 设置其中心偏移量
    
21.             * onCenter
    
22.             * @Title: onCenter
    
23.             * @throws
    
24.             */
    
25.                 public boolean onCenter(OverlayItem item) {
    
26.                         item.setAnchor(0.5f, 1f);
    
27.                         return true;
    
28.                 }
    
29.         }
    
30. 
    
31. 
    
32. //==============================</font>

复制代码

4、因为需要一进入地图页就显示详情内容弹窗：-即上面的地址和最后更新时间

1. <font face="微软雅黑" size="3">/** 直接显示pop
   
2.           * showPopOverlay
   
3.           * @Title: showPopOverlay
   
4.           * @throws
   
5.           */
   
6.         public void showPopOverlay(int index){
   
7.                 currentIndex = index;
   
8.                 if(mOverlay!=null && mOverlay.getItem(index)!=null){
   
9.                         OverlayItem item = mOverlay.getItem(index);
   
10.                         String string = mOverlay.getItem(index).getTitle();//地址/方向/速度
    
11.                         String[] s =string.split("/");
    
12.                         String address = s[0];
    
13.                         String direction = s[1];
    
14.                         String speed = s[2];
    
15.                         String t = mOverlay.getItem(index).getSnippet();//最后更新时间
    
16.                         if (tv_address != null) {
    
17.                                 tv_address.setText(address);
    
18.                         } else {
    
19.                                 tv_address.setText("");
    
20.                         }
    
21.                         if (tv_rate != null) {
    
22.                                 tv_rate.setText("方向："+direction+" 速度："+speed);
    
23.                         } else {
    
24.                                 tv_rate.setText("");
    
25.                         }
    
26.                         long time = Long.parseLong(t);
    
27.                         if (tv_time != null) {
    
28.                                 tv_time.setText("最后更新时间："+TimeUtil.longToString(time * 1000,TimeUtil.FORMAT_DATE1_TIME));
    
29.                         } else {
    
30.                                 tv_time.setText("");
    
31.                         }
    
32.                         Bitmap[] bitMaps = {BMapUtil.getBitmapFromView(popupInfo) };
    
33.                         pop.showPopup(bitMaps, item.getPoint(), BMapUtil.dip2px(this.getActivity(), 75));
    
34.                 }
    
35.         }
    
36. 
    
37. 
    
38. //==============================</font>

复制代码

5、最后在需要调用的地方加上：createOverlayItem(xxx)和showPopOverlay(i);就行
吐槽：
还要和大家说一点的就是：
一般，我们服务端给我们的坐标数据类型有可能并不是百度或者高德地图能够显示准确的坐标类型，因为基本上每个地图使用的坐标类型都不太一致，这也就是为什么服务端传过来的数据在地图上显示和真实位置有偏移，这时候就需要用到坐标转换了，百度地图提供了专门的坐标转换方法，能够很方便的转换：CoordinateConvert.fromWgs84ToBaidu(stop);

但是，坑爹的高德地图，却并未提供api给我们，也许有，可能我未发现，因为我在高德地图论坛里面没发现有人分享出来，问了管理，说要发风邮件给他们技术人员，然后才能提供隐藏api，但是等了快一周时间，毛都没有，最后实在受不，就只能将github上面有人写的关于object-c方面的将WGS84坐标转换为高德地图坐标的方法转成java方法。下篇帖子会分享出代码的！
Ps:
全部代码已经贴出，我的这些代码是可以直接拿来用的，我看网上很多人分享的一些东西拿过来之后实用性不大，不能真正运用到项目中，未考虑与服务端的交互等因素，我以上说的这些基本上是把我在做项目过程中遇见的问题还原罢了，也许有些人会说这不利于新手学习，直接拿来用导致一些人不大愿意思考，我想既然愿意分享出来，就应该尽量详细，并尽量考虑到与服务端交互，减少后来者出错的概率，至于思不思考就看个人啦！