百度地图画圈搜索功能探索

        由于公司项目需要大量用到地图功能,看安居客和搜房网app上面手指画圈搜索功能比较新异,所以做了一个类似的Demo。效果如下:

        主要使用的技术有:触摸事件的处理、自定义view、屏幕xy坐标转化为百度经纬度坐标、百度地图自定义绘制、百度地图位置判断等。

        因为滑动屏幕时会移动百度地图,所以会跟手指画圈的动作冲突,这里我们使用了两个状态切换,一个状态是地图模式,满足用户的移动、放大缩小等;另一个状态是绘图模式,此时会在地图上面蒙一个自定义view,接下来的收拾操作都会在这个自定义view上面进行了。

        接下来就是自定义view的事情了,在view的onTouchEvent方法中获取手指down、move和up的xy坐标:

public boolean onTouchEvent(MotionEvent event) {
    float x = event.getX();
    float y = event.getY();
    activity.getLL(x, y);
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN://手指开始按压屏幕,这个动作包含了初始化位置
            startX = x;
            startY = y;
            onTouchDown(x , y);
            invalidate();//刷新画布,重新运行onDraw()方法
            activity.cleanMap();
            break;
        case MotionEvent.ACTION_MOVE://手指按压屏幕时,位置的改变触发,这个方法在ACTION_DOWNACTION_UP之间。
            onTouchMove(x , y);
            invalidate();
            break;
        case MotionEvent.ACTION_UP://手指离开屏幕,不再按压屏幕
            endX = x;
            endY = y;
            float deX = Math.abs(endX - startX);
            float deY = Math.abs(endY - startY);
            mCanvas.drawLine(startX, startY,endX, endY, mPaint);
            onTouchUp(x , y);
            invalidate();
            activity.show();
            mCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
            initXY();
            break;
    }
    return true;
}

        然后调用百度地图api,把屏幕坐标转化为经纬度坐标:

BaiduMap.getProjection().fromScreenLocation(point);

        然后使用百度地图自定义绘制功能在百度地图上面绘制线条,注意这里会自动把down点和up点进行收尾相连,形成一个封闭的图形:

OverlayOptions polygonOption = new PolygonOptions()
        .points(pts)
        .stroke(new Stroke(5, 0xAA00FF00))
        .fillColor(0xAA94E61A);
//在地图上添加多边形Option,用于显示
mBaiduMap.addOverlay(polygonOption);

        然后判断点pt是否在这个区域内,在区域内就显示:

if (SpatialRelationUtil.isPolygonContainsPoint(pts, new LatLng(lat, lng))){
    initOverlay(new LatLng(lat, lng), i);
}

        显示完后隐藏这个自定义view,接下来所有的手势都交由百度地图来处理了,这样就达到了画圈搜索功能。

Published by

风君子

独自遨游何稽首 揭天掀地慰生平