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