百度地图圆的半径拖拽

// 定义中心和边界点
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);
});



<script src="js/GeoUtils.js" type="text/javascript"></script>

引入http://api.map.baidu.com/library/GeoUtils/1.2/docs/symbols/src/BMapLib_GeoUtils.js.html

猜你喜欢

转载自blog.csdn.net/qq_42037231/article/details/82784179
今日推荐