我们使用百度地图的时候,点击地图上的Marker,会弹出一个该地点详细信息的Marker,如下左图所示,有时候,我们希望自己定义这个弹出窗口的内容,或者,干脆用自己的数据来构造这样的弹出窗口,但是,在百度地图最新的SDK中,没有方便操作这种弹出窗口的类,于是,看了一遍百度地图覆盖物的API,我决定用自定义View的方法来实现类似的效果,先贴一下大体效果图,如下右图:
基本原理就是用ItemizedOverlay来添加附加物,在OnTap方法中向MapView上添加一个自定义的View(如果已存在就直接设为可见),下面具体来介绍我的实现方法:
一、自定义覆盖物类:MyPopupOverlay,这个类是最关键的一个类ItemizedOverlay,用于设置Marker,并定义Marker的点击事件,弹出窗口,至于弹出窗口的内容,则通过定义Listener,放到Activity中去构造。如果没有特殊需求,这个类不需要做什么改动。代码如下,popupLinear这个对象,就是加到地图上的自定义View:
1 public class MyPopupOverlay extends ItemizedOverlay<OverlayItem> { 2 3 private Context context = null; 4 // 这是弹出窗口, 包括内容部分还有下面那个小三角 5 private LinearLayout popupLinear = null; 6 // 这是弹出窗口的内容部分 7 private View popupView = null; 8 private MapView mapView = null; 9 private Projection projection = null; 10 11 // 这是弹出窗口内容部分使用的layoutId,在Activity中设置 12 private int layoutId = 0; 13 // 是否使用百度带有A-J字样的Marker 14 private boolean useDefaultMarker = false; 15 private int[] defaultMarkerIds = { R.drawable.icon_marka, 16 R.drawable.icon_markb, R.drawable.icon_markc, 17 R.drawable.icon_markd, R.drawable.icon_marke, 18 R.drawable.icon_markf, R.drawable.icon_markg, 19 R.drawable.icon_markh, R.drawable.icon_marki, 20 R.drawable.icon_markj, }; 21 22 // 这个Listener用于在Marker被点击时让Activity填充PopupView的内容 23 private OnTapListener onTapListener = null; 24 25 public MyPopupOverlay(Context context, Drawable marker, MapView mMapView) { 26 super(marker, mMapView); 27 this.context = context; 28 this.popupLinear = new LinearLayout(context); 29 this.mapView = mMapView; 30 popupLinear.setOrientation(LinearLayout.VERTICAL); 31 popupLinear.setVisibility(View.GONE); 32 projection = mapView.getProjection(); 33 } 34 35 @Override 36 public boolean onTap(GeoPoint pt, MapView mMapView) { 37 // 点击窗口以外的区域时,当前窗口关闭 38 if (popupLinear != null && popupLinear.getVisibility() == View.VISIBLE) { 39 LayoutParams lp = (LayoutParams) popupLinear.getLayoutParams(); 40 Point tapP = new Point(); 41 projection.toPixels(pt, tapP); 42 Point popP = new Point(); 43 projection.toPixels(lp.point, popP); 44 int xMin = popP.x - lp.width / 2 + lp.x; 45 int yMin = popP.y - lp.height + lp.y; 46 int xMax = popP.x + lp.width / 2 + lp.x; 47 int yMax = popP.y + lp.y; 48 if (tapP.x < xMin || tapP.y < yMin || tapP.x > xMax 49 || tapP.y > yMax) 50 popupLinear.setVisibility(View.GONE); 51 } 52 return false; 53 } 54 55 @Override 56 protected boolean onTap(int i) { 57 // 点击Marker时,该Marker滑动到地图中央偏下的位置,并显示Popup窗口 58 OverlayItem item = getItem(i); 59 if (popupView == null) { 60 // 如果popupView还没有创建,则构造popupLinear 61 if (!createPopupView()){ 62 return true; 63 } 64 } 65 if (onTapListener == null) 66 return true; 67 popupLinear.setVisibility(View.VISIBLE); 68 onTapListener.onTap(i, popupView); 69 70 popupLinear.measure(0, 0); 71 int viewWidth = popupLinear.getMeasuredWidth(); 72 int viewHeight = popupLinear.getMeasuredHeight(); 73 74 LayoutParams layoutParams = new LayoutParams(viewWidth, viewHeight, 75 item.getPoint(), 0, -60, LayoutParams.BOTTOM_CENTER); 76 layoutParams.mode = LayoutParams.MODE_MAP; 77 78 popupLinear.setLayoutParams(layoutParams); 79 Point p = new Point(); 80 projection.toPixels(item.getPoint(), p); 81 p.y = p.y - viewHeight / 2; 82 GeoPoint point = projection.fromPixels(p.x, p.y); 83 84 mapView.getController().animateTo(point); 85 return true; 86 } 87 88 private boolean createPopupView() { 89 // TODO Auto-generated method stub 90 if (layoutId == 0) 91 return false; 92 popupView = LayoutInflater.from(context).inflate(layoutId, null); 93 popupView.setBackgroundResource(R.drawable.popupborder); 94 ImageView dialogStyle = new ImageView(context); 95 dialogStyle.setImageDrawable(context.getResources().getDrawable( 96 R.drawable.iw_tail)); 97 popupLinear.addView(popupView); 98 android.widget.LinearLayout.LayoutParams lp = new android.widget.LinearLayout.LayoutParams( 99 LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT); 100 lp.topMargin = -2; 101 lp.leftMargin = 60; 102 popupLinear.addView(dialogStyle, lp); 103 mapView.addView(popupLinear); 104 return true; 105 } 106 107 @Override 108 public void addItem(List<OverlayItem> items) { 109 // TODO Auto-generated method stub 110 int startIndex = getAllItem().size(); 111 for (OverlayItem item : items){ 112 if (startIndex >= defaultMarkerIds.length) 113 startIndex = defaultMarkerIds.length - 1; 114 if (useDefaultMarker && item.getMarker() == null){ 115 item.setMarker(context.getResources().getDrawable( 116 defaultMarkerIds[startIndex++])); 117 } 118 } 119 super.addItem(items); 120 } 121 122 @Override 123 public void addItem(OverlayItem item) { 124 // TODO Auto-generated method stub 125 // 重载这两个addItem方法,主要用于设置自己默认的Marker 126 int index = getAllItem().size(); 127 if (index >= defaultMarkerIds.length) 128 index = defaultMarkerIds.length - 1; 129 if (useDefaultMarker && item.getMarker() == null){ 130 item.setMarker(context.getResources().getDrawable( 131 defaultMarkerIds[getAllItem().size()])); 132 } 133 super.addItem(item); 134 } 135 136 public void setLayoutId(int layoutId) { 137 this.layoutId = layoutId; 138 } 139 140 public void setUseDefaultMarker(boolean useDefaultMarker) { 141 this.useDefaultMarker = useDefaultMarker; 142 } 143 144 public void setOnTapListener(OnTapListener onTapListener) { 145 this.onTapListener = onTapListener; 146 } 147 148 public interface OnTapListener { 149 public void onTap(int index, View popupView); 150 } 151 }
二、MainActivity,这是主界面,用来显示地图,创建MyPopupOverlay对象,在使用我写的MyPopupOverlay这个类时,需要遵循以下步骤:
下面是我的代码(MainActivity):
public class MainActivity extends Activity { private BMapManager mBMapMan = null; private MapView mMapView = null; private String keyString = "这里填入申请的KEY"; @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); mBMapMan = new BMapManager(getApplication()); mBMapMan.init(keyString, new MKGeneralHandler(MainActivity.this)); //MKGeralHandler是一个实现MKGeneralListener接口的类,详见百度的文档 setContentView(R.layout.activity_main); // activity_main.xml中就是百度地图官方文档提供的LinearLayout下面放一个MapView的布局 mMapView = (MapView) findViewById(R.id.bmapsView); // 获取地图MapView对象 mMapView.setBuiltInZoomControls(true); final MapController mMapController = mMapView.getController(); mMapController.setZoom(16); GeoPoint p1 = new GeoPoint(39113458, 117183652); // 天大正门的坐标 GeoPoint p2 = new GeoPoint(39117258, 117178252); // 天大大活的坐标 mMapController.animateTo(p1); //声明MyPopupOverlay对象 MyPopupOverlay myOverlay = new MyPopupOverlay( MainActivity.this, getResources().getDrawable(R.drawable.icon_gcoding), mMapView); // 这是第1步,创建MyPopupOverlay对象 myOverlay.setLayoutId(R.layout.popup_content); // 这是第2步,设置弹出窗口的布局文件 myOverlay.setUseDefaultMarker(true); // 这是第3步,设置是否使用A-J的Marker OverlayItem item1 = new OverlayItem(p1, "", ""); OverlayItem item2 = new OverlayItem(p2, "", ""); List<OverlayItem> items = new ArrayList<OverlayItem>(); items.add(item1); items.add(item2); myOverlay.addItem(items); // 这是第4步,向MyPopupOverlay中依次添加OverlayItem对象,或存到链表中一次性添加 // myOverlay.addItem(item2); final List<MapPopupItem> mItems = new ArrayList<MapPopupItem>(); // 这是暂时自己造的model对象,存储显示的数据 MapPopupItem mItem = new MapPopupItem(); mItem.setTitle("天津大学"); // ...... 这里依次添加了地址、电话、标签、图片等信息 mItems.add(mItem); mItem = new MapPopupItem(); mItem.setTitle("天津大学大学生活动中心"); // ...... 同样添加第二个点的地址、电话、标签、图片信息 mItems.add(mItem); myOverlay.setOnTapListener(new OnTapListener() { @Override public void onTap(int index, View popupView) { // 这是第5步,设置监听器,为popupView填充数据 // TODO Auto-generated method stub MapPopupItem mItem = mItems.get(index); // 这是存储model数据的数组,根据被点击的点的index获取具体对象 TextView shopName = (TextView) popupView.findViewById(R.id.name); // ...... 依次获得视图中的各个控件(地址、电话、标签、图片等) shopName.setText(mItem.getTitle()); // ...... 依次为这些控件赋上值(地址、电话、标签、图片等信息) } }); mMapView.getOverlays().add(myOverlay); // 最后一步,添加覆盖物层 mMapView.refresh(); } @Override protected void onDestroy() { mMapView.destroy(); if (mBMapMan != null) { mBMapMan.destroy(); mBMapMan = null; } super.onDestroy(); } @Override protected void onPause() { mMapView.onPause(); if (mBMapMan != null) { mBMapMan.stop(); } super.onPause(); } @Override protected void onResume() { mMapView.onResume(); if (mBMapMan != null) { mBMapMan.start(); } super.onResume(); } }
这就是主要的思路和代码了,因为代码文件、资源文件弄得比较多,不大容易贴出来全部能直接运行的代码,而且布局文件里控件太多也不容易理解,就这么写了,如果大家有什么更好的方法,或者有什么好的建议,欢迎讨论和指正。