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

Posted 2022-10-21 高速蜗牛a

        由于公司项目需要大量用到地图功能，看安居客和搜房网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_DOWN和ACTION_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，接下来所有的手势都交由百度地图来处理了，这样就达到了画圈搜索功能。