android实现百度地图自定义弹出窗口功能
我们使用百度地图的时候，点击地图上的marker，会弹出一个该地点详细信息的窗口，如下左图所示，有时候，我们希望自己定义这个弹出窗口的内容，或者，干脆用自己的数据来构造这样的弹出窗口，但是，在百度地图最新的android sdk中，没有方便操作这种弹出窗口的类，虽然有一个popupoverlay，但是它只支持将弹出内容转化为不多于三个bitmap，如果这个弹出窗口里想有按钮来响应点击事件，用这个就不能满足要求了，于是，看了一遍百度地图覆盖物的api，我决定用自定义view的方法来实现类似的效果，先贴一下大体效果图，如下右图：
基本原理就是用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。