android百度地图 添加覆盖物Marker与InfoWindow的使用

如何添加覆盖物，实现周边搜索，以及对覆盖物的点击出现介绍等效果。

效果图：

我们的需求是，当用户点击衣食住行，或者对对附近搜索是，从服务器返回数据（经纬度，商家信息，介绍等），然后动态生成覆盖物，实现上述效果。关于图片，由于手机上的内存的有限性，所有的图片下载完成都应该存入预设的缓存中，例如LruCache，然后需要的时候从缓存取，缓存没有，下载完成放入缓存；即实现所有的图片所占的内存永远不会超过缓存预设的内存值，当然了本篇的重点不是这个，我直接拿了几张图片加入我们的项目中模拟。

1、承载数据的实体

我们从服务器返回的数据部分，最终可能是个Json数组，我们需要转换为实体集合，即下面的Info.java：

[java] view
plaincopy

1. package com.zhy.zhy_baidu_ditu_demo03;
2. import java.io.Serializable;
3. import java.util.ArrayList;
4. import java.util.List;
5. public class Info implements Serializable
6. {
7. private static final long serialVersionUID = -758459502806858414L;
8. /**
9. * 精度
10. */
11. private double latitude;
12. /**
13. * 纬度
14. */
15. private double longitude;
16. /**
17. * 图片ID，真实项目中可能是图片路径
18. */
19. private int imgId;
20. /**
21. * 商家名称
22. */
23. private String name;
24. /**
25. * 距离
26. */
27. private String distance;
28. /**
29. * 赞数量
30. */
31. private int zan;
32. public static List<Info> infos = new ArrayList<Info>();
33. static
34. {
35. infos.add(new Info(34.242652, 108.971171, R.drawable.a01, "英伦贵族小旅馆",
36. "距离209米", 1456));
37. infos.add(new Info(34.242952, 108.972171, R.drawable.a02, "沙井国际洗浴会所",
38. "距离897米", 456));
39. infos.add(new Info(34.242852, 108.973171, R.drawable.a03, "五环服装城",
40. "距离249米", 1456));
41. infos.add(new Info(34.242152, 108.971971, R.drawable.a04, "老米家泡馍小炒",
42. "距离679米", 1456));
43. }
44. public Info()
45. {
46. }
47. public Info(double latitude, double longitude, int imgId, String name,
48. String distance, int zan)
49. {
50. super();
51. this.latitude = latitude;
52. this.longitude = longitude;
53. this.imgId = imgId;
54. this.name = name;
55. this.distance = distance;
56. this.zan = zan;
57. }
58. public double getLatitude()
59. {
60. return latitude;
61. }
62. public void setLatitude(double latitude)
63. {
64. this.latitude = latitude;
65. }
66. public double getLongitude()
67. {
68. return longitude;
69. }
70. public void setLongitude(double longitude)
71. {
72. this.longitude = longitude;
73. }
74. public String getName()
75. {
76. return name;
77. }
78. public int getImgId()
79. {
80. return imgId;
81. }
82. public void setImgId(int imgId)
83. {
84. this.imgId = imgId;
85. }
86. public void setName(String name)
87. {
88. this.name = name;
89. }
90. public String getDistance()
91. {
92. return distance;
93. }
94. public void setDistance(String distance)
95. {
96. this.distance = distance;
97. }
98. public int getZan()
99. {
100. return zan;
101. }
102. public void setZan(int zan)
103. {
104. this.zan = zan;
105. }
106. }

我直接在实体类中声明了一个静态列表集合，模拟从服务器返回的数据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<Info> 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. InfoWindow mInfoWindow;
10. //生成一个TextView用户在地图中显示InfoWindow
11. TextView location = new TextView(getApplicationContext());
12. location.setBackgroundResource(R.drawable.location_tips);
13. location.setPadding(30, 20, 30, 50);
14. location.setText(info.getName());
15. //将marker所在的经纬度的信息转化成屏幕上的坐标
16. final LatLng ll = marker.getPosition();
17. Point p = mBaiduMap.getProjection().toScreenLocation(ll);
18. Log.e(TAG, "--!" + p.x + " , " + p.y);
19. p.y -= 47;
20. LatLng llInfo = mBaiduMap.getProjection().fromScreenLocation(p);
21. //为弹出的InfoWindow添加点击事件
22. mInfoWindow = new InfoWindow(location, llInfo,
23. new OnInfoWindowClickListener()
24. {
25. @Override
26. public void onInfoWindowClick()
27. {
28. //隐藏InfoWindow
29. mBaiduMap.hideInfoWindow();
30. }
31. });
32. //显示InfoWindow
33. mBaiduMap.showInfoWindow(mInfoWindow);
34. //设置详细信息布局为可见
35. mMarkerInfoLy.setVisibility(View.VISIBLE);
36. //根据商家信息为详细信息布局设置信息
37. popupInfo(mMarkerInfoLy, info);
38. return true;
39. }
40. });

根据商家的信息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. mMarkerLy.setTag(viewHolder);
22. }
23. viewHolder = (ViewHolder) mMarkerLy.getTag();
24. viewHolder.infoImg.setImageResource(info.getImgId());
25. viewHolder.infoDistance.setText(info.getDistance());
26. viewHolder.infoName.setText(info.getName());
27. viewHolder.infoZan.setText(info.getZan() + "");
28. }

这里我们使用了一个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. @Override
4. public boolean onMapPoiClick(MapPoi arg0)
5. {
6. return false;
7. }
8. @Override
9. public void onMapClick(LatLng arg0)
10. {
11. mMarkerInfoLy.setVisibility(View.GONE);
12. mBaiduMap.hideInfoWindow();
13. }
14. });

最后看一下我们的布局文件：

[html] view
plaincopy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent" >
5. <com.baidu.mapapi.map.MapView
6. android:id="@+id/id_bmapView"
7. android:layout_width="fill_parent"
8. android:layout_height="fill_parent"
9. android:clickable="true" />
10. <RelativeLayout
11. android:id="@+id/id_marker_info"
12. android:visibility="gone"
13. android:layout_width="fill_parent"
14. android:layout_height="220dp"
15. android:layout_alignParentBottom="true"
16. android:background="#CC4e5a6b"
17. android:clickable="true" >
18. <ImageView
19. android:id="@+id/info_img"
20. android:layout_width="fill_parent"
21. android:layout_height="150dp"
22. android:layout_marginBottom="10dp"
23. android:layout_marginLeft="12dp"
24. android:layout_marginRight="12dp"
25. android:layout_marginTop="10dp"
26. android:alpha="1.0"
27. android:background="@drawable/map_image_border_white"
28. android:clickable="true"
29. android:scaleType="fitXY"
30. android:src="@drawable/a04" />
31. <RelativeLayout
32. android:layout_width="fill_parent"
33. android:layout_height="50dp"
34. android:layout_alignParentBottom="true"
35. android:background="@drawable/bg_map_bottom" >
36. <LinearLayout
37. android:layout_width="fill_parent"
38. android:layout_height="wrap_content"
39. android:layout_centerVertical="true"
40. android:layout_marginLeft="20dp"
41. android:orientation="vertical" >
42. <TextView
43. android:id="@+id/info_name"
44. android:layout_width="wrap_content"
45. android:layout_height="wrap_content"
46. android:text="老米家泡馍小炒"
47. android:textColor="#FFF5EB" />
48. <TextView
49. android:id="@+id/info_distance"
50. android:layout_width="wrap_content"
51. android:layout_height="wrap_content"
52. android:text="距离200米"
53. android:textColor="#FFF5EB" />
54. </LinearLayout>
55. <LinearLayout
56. android:layout_width="wrap_content"
57. android:layout_height="wrap_content"
58. android:layout_alignParentRight="true"
59. android:layout_centerVertical="true"
60. android:layout_marginRight="20dp"
61. android:orientation="horizontal" >
62. <ImageView
63. android:layout_width="wrap_content"
64. android:layout_height="wrap_content"
65. android:onClick="zan"
66. android:src="@drawable/map_zan" />
67. <TextView
68. android:id="@+id/info_zan"
69. android:layout_width="wrap_content"
70. android:layout_height="wrap_content"
71. android:layout_gravity="center"
72. android:text="652"
73. android:textColor="#FFF5EB" />
74. </LinearLayout>
75. </RelativeLayout>
76. </RelativeLayout>
77. </RelativeLayout>

除了MapView，其他都是详细信息的布局，默认是隐藏的，当用户点击Marker显示以及设置初值，当用户单击地图时再将其隐藏。