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

前端技术 2023/09/02 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);
    }
}

本文地址:https://www.stayed.cn/item/4279

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。