android實現百度地圖自定義彈出視窗功能
阿新 • • 發佈：2019-01-27
基本原理就是用ItemizedOverlay來新增附加物，在OnTap方法中向MapView上新增一個自定義的View（如果已存在就直接設為可見），下面具體來介紹我的實現方法：
一、自定義覆蓋物類：MyPopupOverlay，這個類是最關鍵的一個類ItemizedOverlay，用於設定Marker，並定義Marker的點選事件，彈出視窗，至於彈出視窗的內容，則通過定義Listener，放到Activity中去構造。如果沒有特殊需求，這個類不需要做什麼改動。程式碼如下，popupLinear這個物件，就是加到地圖上的自定義View：
public class MyPopupOverlay extends ItemizedOverlay<OverlayItem> { private Context context = null; // 這是彈出視窗， 包括內容部分還有下面那個小三角 private LinearLayout popupLinear = null; // 這是彈出視窗的內容部分 private View popupView = null; private MapView mapView = null; private Projection projection = null; // 這是彈出視窗內容部分使用的layoutId，在Activity中設定 private int layoutId = 0; // 是否使用百度帶有A-J字樣的Marker private boolean useDefaultMarker = false; private int[] defaultMarkerIds = { R.drawable.icon_marka, R.drawable.icon_markb, R.drawable.icon_markc, R.drawable.icon_markd, R.drawable.icon_marke, R.drawable.icon_markf, R.drawable.icon_markg, R.drawable.icon_markh, R.drawable.icon_marki, R.drawable.icon_markj, }; // 這個Listener用於在Marker被點選時讓Activity填充PopupView的內容 private OnTapListener onTapListener = null; public MyPopupOverlay(Context context, Drawable marker, MapView mMapView) { super(marker, mMapView); this.context = context; this.popupLinear = new LinearLayout(context); this.mapView = mMapView; popupLinear.setOrientation(LinearLayout.VERTICAL); popupLinear.setVisibility(View.GONE); projection = mapView.getProjection(); } @Override public boolean onTap(GeoPoint pt, MapView mMapView) { // 點選視窗以外的區域時，當前視窗關閉 if (popupLinear != null && popupLinear.getVisibility() == View.VISIBLE) { LayoutParams lp = (LayoutParams) popupLinear.getLayoutParams(); Point tapP = new Point(); projection.toPixels(pt, tapP); Point popP = new Point(); projection.toPixels(lp.point, popP); int xMin = popP.x - lp.width / 2 + lp.x; int yMin = popP.y - lp.height + lp.y; int xMax = popP.x + lp.width / 2 + lp.x; int yMax = popP.y + lp.y; if (tapP.x < xMin || tapP.y < yMin || tapP.x > xMax || tapP.y > yMax) popupLinear.setVisibility(View.GONE); } return false; } @Override protected boolean onTap(int i) { // 點選Marker時，該Marker滑動到地圖中央偏下的位置，並顯示Popup視窗 OverlayItem item = getItem(i); if (popupView == null) { // 如果popupView還沒有建立，則構造popupLinear if (!createPopupView()){ return true; } } if (onTapListener == null) return true; popupLinear.setVisibility(View.VISIBLE); onTapListener.onTap(i, popupView); popupLinear.measure(0, 0); int viewWidth = popupLinear.getMeasuredWidth(); int viewHeight = popupLinear.getMeasuredHeight(); LayoutParams layoutParams = new LayoutParams(viewWidth, viewHeight, item.getPoint(), 0, -60, LayoutParams.BOTTOM_CENTER); layoutParams.mode = LayoutParams.MODE_MAP; popupLinear.setLayoutParams(layoutParams); Point p = new Point(); projection.toPixels(item.getPoint(), p); p.y = p.y - viewHeight / 2; GeoPoint point = projection.fromPixels(p.x, p.y); mapView.getController().animateTo(point); return true; } private boolean createPopupView() { // TODO Auto-generated method stub if (layoutId == 0) return false; popupView = LayoutInflater.from(context).inflate(layoutId, null); popupView.setBackgroundResource(R.drawable.popupborder); ImageView dialogStyle = new ImageView(context); dialogStyle.setImageDrawable(context.getResources().getDrawable( R.drawable.iw_tail)); popupLinear.addView(popupView); android.widget.LinearLayout.LayoutParams lp = new android.widget.LinearLayout.LayoutParams( LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT); lp.topMargin = -2; lp.leftMargin = 60; popupLinear.addView(dialogStyle, lp); mapView.addView(popupLinear); return true; } @Override public void addItem(List<OverlayItem> items) { // TODO Auto-generated method stub int startIndex = getAllItem().size(); for (OverlayItem item : items){ if (startIndex >= defaultMarkerIds.length) startIndex = defaultMarkerIds.length - 1; if (useDefaultMarker && item.getMarker() == null){ item.setMarker(context.getResources().getDrawable( defaultMarkerIds[startIndex++])); } } super.addItem(items); } @Override public void addItem(OverlayItem item) { // TODO Auto-generated method stub // 過載這兩個addItem方法，主要用於設定自己預設的Marker int index = getAllItem().size(); if (index >= defaultMarkerIds.length) index = defaultMarkerIds.length - 1; if (useDefaultMarker && item.getMarker() == null){ item.setMarker(context.getResources().getDrawable( defaultMarkerIds[getAllItem().size()])); } super.addItem(item); } public void setLayoutId(int layoutId) { this.layoutId = layoutId; } public void setUseDefaultMarker(boolean useDefaultMarker) { this.useDefaultMarker = useDefaultMarker; } public void setOnTapListener(OnTapListener onTapListener) { this.onTapListener = onTapListener; } public interface OnTapListener { public void onTap(int index, View popupView); } }
二、MainActivity，這是主介面，用來顯示地圖，建立MyPopupOverlay物件，在使用我寫的MyPopupOverlay這個類時，需要遵循以下步驟：
建立MyPopupOverlay物件，建構函式為public MyPopupOverlay(Context context, Drawable marker, MapView mMapView)，四個引數分別為當前的上下文、通用的Marker（這是ItemizedOverlay需要的，當不設定Marker時的預設Marker）以及百度地圖物件。
設定自定義的彈出視窗內容的佈局檔案ID，使用的方法為public void setLayoutId(int layoutId)。
設定是使用自定義的Marker，還是預先寫好的帶有A-J字樣的百度地圖原裝Marker，使用的方法為public void setUseDefaultMarker(boolean useDefaultMarker)，只有當這個值為true且沒有呼叫OverlayItem的setMarker方法為特定點設定Marker時，才使用原裝Marker。
建立Marker所在的點，即分別建立一個個OverlayItem，然後呼叫public void addItem(OverlayItem item)或public void addItem(List<OverlayItem> items)方法來把這些OverlayItem新增到自定義的附加層上去。
為MyPopupOverlay物件新增onTap事件，當Marker被點選時，填充彈出視窗中的內容（也就是第2條中layoutId佈局中的內容），設定方法為public void setOnTapListener(OnTapListener onTapListener)，OnTapListener是定義在MyPopupOverlay中的介面，實現這個介面需要覆寫public void onTap(int index, View popupView)方法，其中，index表示被點選的Marker（確切地說是OverlayItem）的索引，popupView是使用layoutId這個佈局的View，也就是彈出視窗除了下面的小三角之外的部分。
把這個MyPopupOverlay物件新增到地圖上去：mMapView.getOverlays().add(myOverlay);mMapView.refresh();
下面是我的程式碼（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(); } }
這就是主要的思路和程式碼了，因為程式碼檔案、資原始檔弄得比較多，不大容易貼出來全部能直接執行的程式碼，而且佈局檔案裡控制元件太多也不容易理解，就這麼寫了，如果大家有什麼更好的方法，或者有什麼好的建議，歡迎討論和指正。
注：為了說明問題，主類中我簡化了很多東西，而且有些圖片找起來也挺麻煩，把原始碼附在這裡供大家參考，執行前需要在MainActivity中修改百度地圖的Key。