android实现百度地图自定义弹出窗口功能

时间:2021-09-14 06:35:09

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

android实现百度地图自定义弹出窗口功能

基本原理就是用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。