android百度地圖 添加覆蓋物Marker與InfoWindow的使用

如何添加覆蓋物，實現周邊搜索，以及對覆蓋物的點擊出現介紹等效果。

效果圖：

我們的需求是，當用戶點擊衣食住行，或者對對附近搜索是，從服務器返回數據（經緯度，商家信息，介紹等），然後動態生成覆蓋物，實現上述效果。關於圖片，由於手機上的內存的有限性，所有的圖片下載完成都應該存入預設的緩存中，例如LruCache，然後需要的時候從緩存取，緩存沒有，下載完成放入緩存；即實現所有的圖片所占的內存永遠不會超過緩存預設的內存值，當然了本篇的重點不是這個，我直接拿了幾張圖片加入我們的項目中模擬。

1、承載數據的實體

我們從服務器返回的數據部分，最終可能是個Json數組，我們需要轉換為實體集合，即下面的Info.java：

1. package com.zhy.zhy_baidu_ditu_demo03;
2.  
3. import java.io.Serializable;
4. import java.util.ArrayList;
5. import java.util.List;
6.  
7. public class Info implements Serializable
8. {
9. private static final long serialVersionUID = -758459502806858414L;
10. /**
11. * 精度
12. */
13. private double latitude;
14. /**
15. * 緯度
16. */
17. private double longitude;
18. /**
19. * 圖片ID，真實項目中可能是圖片路徑
20. */
21. private int imgId;
22. /**
23. * 商家名稱
24. */
25. private String name;
26. /**
27. * 距離
28. */
29. private String distance;
30. /**
31. * 贊數量
32. */
33. private int zan;
34.  
35. public static List infos = new ArrayList();
36.  
37. static
38. {
39. infos.add(new Info(34.242652, 108.971171, R.drawable.a01, 英倫貴族小旅館,
40. 距離209米, 1456));
41. infos.add(new Info(34.242952, 108.972171, R.drawable.a02, 沙井國際洗浴會所,
42. 距離897米, 456));
43. infos.add(new Info(34.242852, 108.973171, R.drawable.a03, 五環服裝城,
44. 距離249米, 1456));
45. infos.add(new Info(34.242152, 108.971971, R.drawable.a04, 老米家泡馍小炒,
46. 距離679米, 1456));
47. }
48.  
49. public Info()
50. {
51. }
52.  
53. public Info(double latitude, double longitude, int imgId, String name,
54. String distance, int zan)
55. {
56. super();
57. this.latitude = latitude;
58. this.longitude = longitude;
59. this.imgId = imgId;
60. this.name = name;
61. this.distance = distance;
62. this.zan = zan;
63. }
64.  
65. public double getLatitude()
66. {
67. return latitude;
68. }
69.  
70. public void setLatitude(double latitude)
71. {
72. this.latitude = latitude;
73. }
74.  
75. public double getLongitude()
76. {
77. return longitude;
78. }
79.  
80. public void setLongitude(double longitude)
81. {
82. this.longitude = longitude;
83. }
84.  
85. public String getName()
86. {
87. return name;
88. }
89.  
90. public int getImgId()
91. {
92. return imgId;
93. }
94.  
95. public void setImgId(int imgId)
96. {
97. this.imgId = imgId;
98. }
99.  
100. public void setName(String name)
101. {
102. this.name = name;
103. }
104.  
105. public String getDistance()
106. {
107. return distance;
108. }
109.  
110. public void setDistance(String distance)
111. {
112. this.distance = distance;
113. }
114.  
115. public int getZan()
116. {
117. return zan;
118. }
119.  
120. public void setZan(int zan)
121. {
122. this.zan = zan;
123. }
124.  
125. }
     我直接在實體類中聲明了一個靜態列表集合，模擬從服務器返回的數據Info.infos。

      

     2、地圖中動態添加Overlay

     為了方便，我把按鈕都放在menu菜單中：

      

     [java] view plaincopy
     1. @Override
     2. public boolean onOptionsItemSelected(MenuItem item)
     3. {
     4. switch (item.getItemId())
     5. {
     6. case R.id.id_menu_map_addMaker:
     7. addInfosOverlay(Info.infos);
     8. break;
     9. ...
     10. ｝
     11. ｝
         [java] view plaincopy
         1. /**
         2. * 初始化圖層
         3. */
         4. public void addInfosOverlay(List infos)
         5. {
         6. mBaiduMap.clear();
         7. LatLng latLng = null;
         8. OverlayOptions overlayOptions = null;
         9. Marker marker = null;
         10. for (Info info : infos)
         11. {
         12. // 位置
         13. latLng = new LatLng(info.getLatitude(), info.getLongitude());
         14. // 圖標
         15. overlayOptions = new MarkerOptions().position(latLng)
         16. .icon(mIconMaker).zIndex(5);
         17. marker = (Marker) (mBaiduMap.addOverlay(overlayOptions));
         18. Bundle bundle = new Bundle();
         19. bundle.putSerializable(info, info);
         20. marker.setExtraInfo(bundle);
         21. }
         22. // 將地圖移到到最後一個經緯度位置
         23. MapStatusUpdate u = MapStatusUpdateFactory.newLatLng(latLng);
         24. mBaiduMap.setMapStatus(u);
         25. }
             可以看到，我們迭代添加了Overlay，然後在返回的Marker中設置了商家的信息，用戶用戶對Marker的點擊時，拿到商家數據生成詳細信息布局。

              

             3、為地圖上的Marker添加點擊事件：

              

             [java] view plaincopy
             1. //對Marker的點擊
             2. mBaiduMap.setOnMarkerClickListener(new OnMarkerClickListener()
             3. {
             4. @Override
             5. public boolean onMarkerClick(final Marker marker)
             6. {
             7. //獲得marker中的數據
             8. Info info = (Info) marker.getExtraInfo().get(info);
             9.  
             10. InfoWindow mInfoWindow;
             11. //生成一個TextView用戶在地圖中顯示InfoWindow
             12. TextView location = new TextView(getApplicationContext());
             13. location.setBackgroundResource(R.drawable.location_tips);
             14. location.setPadding(30, 20, 30, 50);
             15. location.setText(info.getName());
             16. //將marker所在的經緯度的信息轉化成屏幕上的坐標
             17. final LatLng ll = marker.getPosition();
             18. Point p = mBaiduMap.getProjection().toScreenLocation(ll);
             19. Log.e(TAG, --! + p.x + , + p.y);
             20. p.y -= 47;
             21. LatLng llInfo = mBaiduMap.getProjection().fromScreenLocation(p);
             22. //為彈出的InfoWindow添加點擊事件
             23. mInfoWindow = new InfoWindow(location, llInfo,
             24. new OnInfoWindowClickListener()
             25. {
             26.  
             27. @Override
             28. public void onInfoWindowClick()
             29. {
             30. //隱藏InfoWindow
             31. mBaiduMap.hideInfoWindow();
             32. }
             33. });
             34. //顯示InfoWindow
             35. mBaiduMap.showInfoWindow(mInfoWindow);
             36. //設置詳細信息布局為可見
             37. mMarkerInfoLy.setVisibility(View.VISIBLE);
             38. //根據商家信息為詳細信息布局設置信息
             39. popupInfo(mMarkerInfoLy, info);
             40. return true;
             41. }
             42. });
                 根據商家的信息Info.java為詳細信息布局中的控件添加數據（記得生成TextView的時候，先設置背景，再設置padding，不然可能會失效~~~）

                  

                  

                 [java] view plaincopy
                 1. /**
                 2. * 根據info為布局上的控件設置信息
                 3. *
                 4. * @param mMarkerInfo2
                 5. * @param info
                 6. */
                 7. protected void popupInfo(RelativeLayout mMarkerLy, Info info)
                 8. {
                 9. ViewHolder viewHolder = null;
                 10. if (mMarkerLy.getTag() == null)
                 11. {
                 12. viewHolder = new ViewHolder();
                 13. viewHolder.infoImg = (ImageView) mMarkerLy
                 14. .findViewById(R.id.info_img);
                 15. viewHolder.infoName = (TextView) mMarkerLy
                 16. .findViewById(R.id.info_name);
                 17. viewHolder.infoDistance = (TextView) mMarkerLy
                 18. .findViewById(R.id.info_distance);
                 19. viewHolder.infoZan = (TextView) mMarkerLy
                 20. .findViewById(R.id.info_zan);
                 21.  
                 22. mMarkerLy.setTag(viewHolder);
                 23. }
                 24. viewHolder = (ViewHolder) mMarkerLy.getTag();
                 25. viewHolder.infoImg.setImageResource(info.getImgId());
                 26. viewHolder.infoDistance.setText(info.getDistance());
                 27. viewHolder.infoName.setText(info.getName());
                 28. viewHolder.infoZan.setText(info.getZan() + );
                 29. }
                     這裡我們使用了一個ViewHoler進行控件的復用，讓findViewById只會執行一次

                      

                      

                     [java] view plaincopy
                     1. /**
                     2. * 復用彈出面板mMarkerLy的控件
                     3. *
                     4. * @author zhy
                     5. *
                     6. */
                     7. private class ViewHolder
                     8. {
                     9. ImageView infoImg;
                     10. TextView infoName;
                     11. TextView infoDistance;
                     12. TextView infoZan;
                     13. }
                         最後添加地圖的單擊事件，隱藏出現的詳細信息布局和InfoWindow

                          

                          

                         [java] view plaincopy
                         1. mBaiduMap.setOnMapClickListener(new OnMapClickListener()
                         2. {
                         3.  
                         4. @Override
                         5. public boolean onMapPoiClick(MapPoi arg0)
                         6. {
                         7. return false;
                         8. }
                         9.  
                         10. @Override
                         11. public void onMapClick(LatLng arg0)
                         12. {
                         13. mMarkerInfoLy.setVisibility(View.GONE);
                         14. mBaiduMap.hideInfoWindow();
                         15.  
                         16. }
                         17. });
                             最後看一下我們的布局文件：

                              

                              

                             [html] view plaincopy
                             1. xmlns:tools=http://schemas.android.com/tools
                             2. android:layout_width=match_parent
                             3. android:layout_height=match_parent >
                             4.  
                             5. android:id=@+id/id_bmapView
                             6. android:layout_width=fill_parent
                             7. android:layout_height=fill_parent
                             8. android:clickable=true />
                             9.  
                             10. android:id=@+id/id_marker_info
                             11. android:visibility=gone
                             12. android:layout_width=fill_parent
                             13. android:layout_height=220dp
                             14. android:layout_alignParentBottom=true
                             15. android:background=#CC4e5a6b
                             16. android:clickable=true >
                             17.  
                             18. android:id=@+id/info_img
                             19. android:layout_width=fill_parent
                             20. android:layout_height=150dp
                             21. android:layout_marginBottom=10dp
                             22. android:layout_marginLeft=12dp
                             23. android:layout_marginRight=12dp
                             24. android:layout_marginTop=10dp
                             25. android:alpha=1.0
                             26. android:background=@drawable/map_image_border_white
                             27. android:clickable=true
                             28. android:scaleType=fitXY
                             29. android:src=@drawable/a04 />
                             30.  
                             31. android:layout_width=fill_parent
                             32. android:layout_height=50dp
                             33. android:layout_alignParentBottom=true
                             34. android:background=@drawable/bg_map_bottom >
                             35.  
                             36. android:layout_width=fill_parent
                             37. android:layout_height=wrap_content
                             38. android:layout_centerVertical=true
                             39. android:layout_marginLeft=20dp
                             40. android:orientation=vertical >
                             41.  
                             42. android:id=@+id/info_name
                             43. android:layout_width=wrap_content
                             44. android:layout_height=wrap_content
                             45. android:text=老米家泡馍小炒
                             46. android:textColor=#FFF5EB />
                             47.  
                             48. android:id=@+id/info_distance
                             49. android:layout_width=wrap_content
                             50. android:layout_height=wrap_content
                             51. android:text=距離200米
                             52. android:textColor=#FFF5EB />
                             53.  
                             54.  
                             55. android:layout_width=wrap_content
                             56. android:layout_height=wrap_content
                             57. android:layout_alignParentRight=true
                             58. android:layout_centerVertical=true
                             59. android:layout_marginRight=20dp
                             60. android:orientation=horizontal >
                             61.  
                             62. android:layout_width=wrap_content
                             63. android:layout_height=wrap_content
                             64. android:onClick=zan
                             65. android:src=@drawable/map_zan />
                             66.  
                             67. android:id=@+id/info_zan
                             68. android:layout_width=wrap_content
                             69. android:layout_height=wrap_content
                             70. android:layout_gravity=center
                             71. android:text=652
                             72. android:textColor=#FFF5EB />
                             73.  
                             74.  
                             75.  
                             76.  
                             77. 
                                 除了MapView，其他都是詳細信息的布局，默認是隱藏的，當用戶點擊Marker顯示以及設置初值，當用戶單擊地圖時再將其隱藏。