Question

百度地图API，画圆型时可以收缩半径大小的功能如何实现，在线等大神

如上图的功能，求解答啊，满意答案格外+50分

Answer 1

circle.enableEditing()
此方法开启圆形区域编辑模式，可以用鼠标控制半径大小

Answer 2

楼主这个问题解决了吗？我现在也遇到这个问题

Answer 3

// 定义中心和边界点
var centerPoint = new BMap.Point(e.lng, e.lat), borderPoint = new BMap.Point(e.lng + 0.005, e.lat);
var circle = new BMap.Circle(centerPoint, 500, {
  strokeColor: "blue",
  fillColor: "blue",
  strokeWeight: 2,
  strokeOpacity: 0.5,
  fillOpacity: 0.2
});

map.addOverlay(circle);
// 定义marker
var marker = new BMap.Marker(centerPoint);
map.addOverlay(marker);
marker = new BMap.Marker(borderPoint, {
  enableDragging: true
});
map.addOverlay(marker);
// 为边界marker添加文本标注
marker.setLabel(new BMap.Label(Math.ceil(BMapLib.GeoUtils.getDistance(borderPoint, centerPoint)), {
  offset: new BMap.Size(20, 0)
}));
marker.center = centerPoint;
marker.circle = circle;
// 监听拖拽事件，重新画圆
marker.addEventListener("dragging", function (e) {
  var distance = Math.ceil(BMapLib.GeoUtils.getDistance(this.point, this.center));
  this.getLabel().setContent(distance);
  this.circle.setRadius(distance);
});

效果如下:

Answer 4

百度地图绘制圆，收缩并实时显示半径效果：

首先，肯定要设置图形可编辑：

overlay.enableEditing()

然后，监控图形变化事件lineupdate：

var overlayLabel = null;
overlay.addEventListener("lineupdate",function(event){
        if(overlayLabel != null){
            map.removeOverlay(overlayLabel);
        }
     
    var radius = overlay.getRadius();//获取圆半径（单位米，可利用BMapLib.DistanceTool工具自定义单位）
    var center = overlay.getCenter();//获取圆心坐标
    var bounds = overlay.getBounds().getNorthEast();//获取圆可视范围东北角坐标
    //生成Label覆盖层
    var point = new BMap.Point(bounds.lng, center.lat); 
    var overlayLabel = new BMap.Label("半径:"+radius+"m",{offset:new BMap.Size(20,-10),position:point});
    //添加覆盖层
    map.addOverlay(overlayLabel); 
});

效果图：

第一次发，如果解决了大家的问题，记得给赞啊O(∩_∩)O