android實(shí)現(xiàn)百度地圖自定義彈出窗口功能
我們使用百度地圖的時(shí)候，點(diǎn)擊地圖上的Marker，會(huì)彈出一個(gè)該地點(diǎn)詳細(xì)信息的窗口，如下左圖所示，有時(shí)候，我們希望自己定義這個(gè)彈出窗口的內(nèi)容，或者，干脆用自己的數(shù)據(jù)來構(gòu)造這樣的彈出窗口，但是，在百度地圖最新的Android SDK中，沒有方便操作這種彈出窗口的類，雖然有一個(gè)PopupOverlay，但是它只支持將彈出內(nèi)容轉(zhuǎn)化為不多于三個(gè)Bitmap，如果這個(gè)彈出窗口里想有按鈕來響應(yīng)點(diǎn)擊事件，用這個(gè)就不能滿足要求了，于是，看了一遍百度地圖覆蓋物的API，我決定用自定義View的方法來實(shí)現(xiàn)類似的效果，先貼一下大體效果圖，如下右圖：
基本原理就是用ItemizedOverlay來添加附加物，在OnTap方法中向MapView上添加一個(gè)自定義的View（如果已存在就直接設(shè)為可見），下面具體來介紹我的實(shí)現(xiàn)方法：
一、自定義覆蓋物類：MyPopupOverlay，這個(gè)類是最關(guān)鍵的一個(gè)類ItemizedOverlay，用于設(shè)置Marker，并定義Marker的點(diǎn)擊事件，彈出窗口，至于彈出窗口的內(nèi)容，則通過定義Listener，放到Activity中去構(gòu)造。如果沒有特殊需求，這個(gè)類不需要做什么改動(dòng)。代碼如下，popupLinear這個(gè)對(duì)象，就是加到地圖上的自定義View：
public class MyPopupOverlay extends ItemizedOverlay<OverlayItem> {
private Context context = null;
// 這是彈出窗口， 包括內(nèi)容部分還有下面那個(gè)小三角
private LinearLayout popupLinear = null;
// 這是彈出窗口的內(nèi)容部分
private View popupView = null;
private MapView mapView = null;
private Projection projection = null;
// 這是彈出窗口內(nèi)容部分使用的layoutId，在Activity中設(shè)置
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, };
// 這個(gè)Listener用于在Marker被點(diǎn)擊時(shí)讓Activity填充PopupView的內(nèi)容
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) {
// 點(diǎn)擊窗口以外的區(qū)域時(shí)，當(dāng)前窗口關(guān)閉
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) {
// 點(diǎn)擊Marker時(shí)，該Marker滑動(dòng)到地圖中央偏下的位置，并顯示Popup窗口
OverlayItem item = getItem(i);
if (popupView == null) {
// 如果popupView還沒有創(chuàng)建，則構(gòu)造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
// 重載這兩個(gè)addItem方法，主要用于設(shè)置自己默認(rèn)的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，這是主界面，用來顯示地圖，創(chuàng)建MyPopupOverlay對(duì)象，在使用我寫的MyPopupOverlay這個(gè)類時(shí)，需要遵循以下步驟：
創(chuàng)建MyPopupOverlay對(duì)象，構(gòu)造函數(shù)為public MyPopupOverlay(Context context, Drawable marker, MapView mMapView)，四個(gè)參數(shù)分別為當(dāng)前的上下文、通用的Marker（這是ItemizedOverlay需要的，當(dāng)不設(shè)置Marker時(shí)的默認(rèn)Marker）以及百度地圖對(duì)象。
設(shè)置自定義的彈出窗口內(nèi)容的布局文件ID，使用的方法為public void setLayoutId(int layoutId)。
設(shè)置是使用自定義的Marker，還是預(yù)先寫好的帶有A-J字樣的百度地圖原裝Marker，使用的方法為public void setUseDefaultMarker(boolean useDefaultMarker)，只有當(dāng)這個(gè)值為true且沒有調(diào)用OverlayItem的setMarker方法為特定點(diǎn)設(shè)置Marker時(shí)，才使用原裝Marker。
創(chuàng)建Marker所在的點(diǎn)，即分別創(chuàng)建一個(gè)個(gè)OverlayItem，然后調(diào)用public void addItem(OverlayItem item)或public void addItem(List<OverlayItem> items)方法來把這些OverlayItem添加到自定義的附加層上去。
為MyPopupOverlay對(duì)象添加onTap事件，當(dāng)Marker被點(diǎn)擊時(shí)，填充彈出窗口中的內(nèi)容（也就是第2條中l(wèi)ayoutId布局中的內(nèi)容），設(shè)置方法為public void setOnTapListener(OnTapListener onTapListener)，OnTapListener是定義在MyPopupOverlay中的接口，實(shí)現(xiàn)這個(gè)接口需要覆寫public void onTap(int index, View popupView)方法，其中，index表示被點(diǎn)擊的Marker（確切地說是OverlayItem）的索引，popupView是使用layoutId這個(gè)布局的View，也就是彈出窗口除了下面的小三角之外的部分。
把這個(gè)MyPopupOverlay對(duì)象添加到地圖上去：mMapView.getOverlays().add(myOverlay);mMapView.refresh();
下面是我的代碼（MainActivity）：
public class MainActivity extends Activity {
private BMapManager mBMapMan = null;
private MapView mMapView = null;
private String keyString = "這里填入申請(qǐng)的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是一個(gè)實(shí)現(xiàn)MKGeneralListener接口的類，詳見百度的文檔
setContentView(R.layout.activity_main);// activity_main.xml中就是百度地圖官方文檔提供的LinearLayout下面放一個(gè)MapView的布局
mMapView = (MapView) findViewById(R.id.bmapsView);// 獲取地圖MapView對(duì)象
mMapView.setBuiltInZoomControls(true);
final MapController mMapController = mMapView.getController();
mMapController.setZoom(16);
GeoPoint p1 = new GeoPoint(39113458, 117183652);// 天大正門的坐標(biāo)
GeoPoint p2 = new GeoPoint(39117258, 117178252);// 天大大活的坐標(biāo)
mMapController.animateTo(p1);
//聲明MyPopupOverlay對(duì)象
MyPopupOverlay myOverlay = new MyPopupOverlay(
MainActivity.this,
getResources().getDrawable(R.drawable.icon_gcoding),
mMapView);// 這是第1步，創(chuàng)建MyPopupOverlay對(duì)象
myOverlay.setLayoutId(R.layout.popup_content);// 這是第2步，設(shè)置彈出窗口的布局文件
myOverlay.setUseDefaultMarker(true);// 這是第3步，設(shè)置是否使用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對(duì)象，或存到鏈表中一次性添加
// myOverlay.addItem(item2);
final List<MapPopupItem> mItems = new ArrayList<MapPopupItem>();// 這是暫時(shí)自己造的model對(duì)象，存儲(chǔ)顯示的數(shù)據(jù)
MapPopupItem mItem = new MapPopupItem();
mItem.setTitle("天津大學(xué)");
// ...... 這里依次添加了地址、電話、標(biāo)簽、圖片等信息
mItems.add(mItem);
mItem = new MapPopupItem();
mItem.setTitle("天津大學(xué)大學(xué)生活動(dòng)中心");
// ...... 同樣添加第二個(gè)點(diǎn)的地址、電話、標(biāo)簽、圖片信息
mItems.add(mItem);
myOverlay.setOnTapListener(new OnTapListener() {
@Override
public void onTap(int index, View popupView) {// 這是第5步，設(shè)置監(jiān)聽器，為popupView填充數(shù)據(jù)
// TODO Auto-generated method stub
MapPopupItem mItem = mItems.get(index);// 這是存儲(chǔ)model數(shù)據(jù)的數(shù)組，根據(jù)被點(diǎn)擊的點(diǎn)的index獲取具體對(duì)象
TextView shopName = (TextView) popupView.findViewById(R.id.name);
// ...... 依次獲得視圖中的各個(gè)控件（地址、電話、標(biāo)簽、圖片等）
shopName.setText(mItem.getTitle());
// ...... 依次為這些控件賦上值（地址、電話、標(biāo)簽、圖片等信息）
}
});
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();
}
}
這就是主要的思路和代碼了，因?yàn)榇a文件、資源文件弄得比較多，不大容易貼出來全部能直接運(yùn)行的代碼，而且布局文件里控件太多也不容易理解，就這么寫了，如果大家有什么更好的方法，或者有什么好的建議，歡迎討論和指正。
注：為了說明問題，主類中我簡化了很多東西，而且有些圖片找起來也挺麻煩，把源代碼附在這里供大家參考，運(yùn)行前需要在MainActivity中修改百度地圖的Key。
相關(guān)文章
Android利用碎片fragment實(shí)現(xiàn)底部標(biāo)題欄(Github模板開源)
Fragment可以作為Activity的組成部分，一個(gè)Activity可以有多個(gè)Fragment，這篇文章主要介紹了Android利用碎片fragment實(shí)現(xiàn)底部標(biāo)題欄(Github模板開源),需要的朋友可以參考下2019-12-12
20行Android代碼寫一個(gè)CircleImageView
這篇文章主要介紹了20行Android代碼寫一個(gè)CircleImageView，制作圓形頭像，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要給大家介紹了關(guān)于Flutter啟動(dòng)流程的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Flutter具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
RecyclerView是Android一個(gè)更強(qiáng)大的控件,其不僅可以實(shí)現(xiàn)和ListView同樣的效果,還有優(yōu)化了ListView中的各種不足。其可以實(shí)現(xiàn)數(shù)據(jù)縱向滾動(dòng),也可以實(shí)現(xiàn)橫向滾動(dòng)(ListView做不到橫向滾動(dòng))。接下來講解RecyclerView的用法2022-10-10
這篇文章主要介紹了Android獲取手機(jī)電池電量用法,以完整實(shí)例形式較為詳細(xì)的分析了Android獲取手機(jī)電量的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
SimpleCommand實(shí)現(xiàn)圖片下載(二)
這篇文章主要為大家詳細(xì)介紹了SimpleCommand實(shí)現(xiàn)圖片下載，并顯示到ImageView控件上，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
android仿華為手機(jī)懸浮窗設(shè)計(jì)
這篇文章主要為大家詳細(xì)介紹了android仿華為手機(jī)懸浮窗設(shè)計(jì)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
眾所周知?Flutter是由Google推出的開源的高性能跨平臺(tái)框架，一個(gè)2D渲染引擎。在Flutter中，Widget是Flutter用戶界面的基本構(gòu)成單元，可以說一切皆Widget。下面來看下Flutter框架的整體結(jié)構(gòu)組成2023-04-04
Android實(shí)現(xiàn)按鈕點(diǎn)擊事件的三種方法總結(jié)
Button是程序用于和用戶進(jìn)行交互的一個(gè)重要控件。既然有Button，那肯定有onClick方法，下面就教大家三種實(shí)現(xiàn)點(diǎn)擊事件的方法，感興趣的可以了解一下2022-04-04
學(xué)會(huì)反編譯比較關(guān)鍵，也是我們美化必須掌握技術(shù)，學(xué)會(huì)反編譯也是實(shí)現(xiàn)制作ROM的起步，ROM高手必然是反編譯高手這里有必要說一下，教程只是給你一個(gè)動(dòng)手的那一個(gè)蹺板，教程不是萬能的，給了你基礎(chǔ)與啟發(fā)，最重要的是我們能夠自主的進(jìn)行創(chuàng)新與思考2016-04-04