Android画圆形和半径

百度地图画圆：动态绘制显示圆半径

    在开发百度地图时，项目需要借助画圆工具框选地图上的点，原始画圆工具可以通过 enableCalculate() 方法获取框选区域面积，进而可以计算圆的半径。

    但怎么样才能够动态绘制显示如上图的圆半径呢？百度地图Polyline是根据两点进行绘制，只有有两点的坐标既可以绘制线，圆心centerPoint我们可以很好的获取，下面就是解决绘制圆外圈的点的信息。我们首先绘制圆，一步一步进行分析：

//绘制地图
   	  var map = new BMap.Map('map');
      var point = new BMap.Point(114.065537,22.553321);
   	  map.centerAndZoom(point , 13);
  	  map.enableScrollWheelZoom();
    //圆的样式
		 var styleOptions = {
            strokeColor: "red",    //边线颜色。
            fillColor: "#DDD3D1",      //填充颜色。当参数为空时，圆形将没有填充效果。
            strokeWeight: 2,       //边线的宽度，以像素为单位。
            strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
            fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
            strokeStyle: 'solid' //边线的样式，solid或dashed。
        };
        //画圆
 		var drawingManager = new BMapLib.DrawingManager(map, {
            isOpen: false, //是否开启绘制模式
            enableDrawingTool: false, //是否显示工具栏
            drawingToolOptions: {
                anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                offset: new BMap.Size(5, 5) //偏离值
            },
            circleOptions: styleOptions, //圆的样式
        });
        drawingManager.open();
        //drawingManager.enableCalculate();     //计算区域面积
        drawingManager.setDrawingMode(BMAP_DRAWING_CIRCLE);//

    要想获取圆心的坐标，我们可以通过查看drawingManager 下面包含什么：

circleOptions: {strokeColor: "red", fillColor: "#DDD3D1", strokeWeight: 2, strokeOpacity: 0.8, fillOpacity: 0.4, …}
controlButton: "left"
map: Ka {ba: "TANGRAM__1f", K: {…}, Ua: div#bdMyMap, width: 1396, height: 688, …}
markerOptions: {}
polygonOptions: {}
polylineOptions: {}
rectangleOptions: {}
__listeners: {onoverlaycomplete: {…}}
_drawingType: "circle"
_enableCalculate: false
_isOpen: true
_map: Ka {ba: "TANGRAM__1f", K: {…}, Ua: div#bdMyMap, width: 1396, height: 688, …}
_mask: e {_enableEdgeMove: true, _map: Ka, container: div, V: div, __listeners: {…}}
_opts: {isOpen: false, enableDrawingTool: false, drawingToolOptions: {…}, circleOptions: {…}}
__proto__: b.lang.Class

    因此，可以通过监听在地图上画圆的事件获取圆心：

var label=null;
 var polyline=null;
 map.addEventListener("mousemove", function () {
            if(drawingManager._mask!=null)
            {
                drawingManager._mask.addEventListener('mousedown',showCirle);
                map.removeEventListener("mousemove", showCirle);
            }
        });
		var centerPoint=null;//圆心
        var showCirle=function(e){
            if (centerPoint == null) {
                debugger;
                centerPoint=e.point;
                drawingManager._mask.addEventListener("mousemove", showRadius);//showRadius计算画圆的半径，下面将进行讲解
                //将获取的圆心，作为marker点添加再地图上
                var maker = new BMap.Marker(e.point);
                map.addOverlay(maker);
            }
        };

    有圆心了，那么如何计算半径呢，我们只要获取另外一个点的坐标即可，通过 getDistance() 方法，进而计算圆的半径：

var showRadius=function (e) {
                var radius=drawingManager._map.getDistance(centerPoint, e.point);
                if(!isNaN(radius)) {
                    map.removeOverlay(label); //清除上一个显示半径的label标注
                    map.removeOverlay(polyline);//清除上一个圆的半径直线
                    //添加文字标签
                    var opts = {
                        position: e.point,    // 指定文本标注所在的地理位置（当前鼠标的位置）
                        offset: new BMap.Size(5, -15)    //设置文本偏移量
                    };
                    label = new BMap.Label("半径：" + (radius / 1000).toFixed(2) + "公里", opts);  // 创建文本标注对象
                    //文本标注样式
                    label.setStyle({
                        color:'#438eff',
                        //fontSize:'14px',
                        fontWeight:'bold',
                        border: "0px solid #ccc",
                        backgroundColor:'',//#2267AD
                    });
                    //从圆心画半径
                    polyline = new BMap.Polyline([
                        centerPoint,
                        e.point
                    ], {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5});//后面参数为划线的样式
                    map.addOverlay(polyline);//添加半径直线
                    map.addOverlay(label);//添加label
                }
            };

    通过上述，进而在画圆时，可以动态显示半径范围（如果想显示框选面积，可以通过 drawingManager.enableCalculate() 获取），结果如下：