Vue利用百度地图画圆并且获取圆心坐标和半径，面试前端开发十大问题

});

//添加鼠标绘制工具监听事件，用于获取绘制结果

this.drawingManager.addEventListener(

“overlaycomplete”,

this.overlaycomplete

);

// 给地图添加鼠标移动监听事件

this.map.addEventListener(“mousemove”, () => {

if (this.drawingManager._mask != null) {

this.drawingManager._mask.addEventListener(“mousedown”, this.showCirle);

this.map.removeEventListener(“mousemove”, this.showCirle);

}

});

},

/**

• 画圆

*/

draw(event) {

this.centerPoint = null; // 中心点

this.label = null;

this.polyline = null;

var arr = document.getElementsByClassName(“bmap-btn”);

for (var i = 0; i < arr.length; i++) {

arr[i].style.backgroundPositionY = “0”;

}

event.target.style.backgroundPositionY = “-52px”;

switch (event.target.id) {

case “marker”: {

var drawingType = BMAP_DRAWING_MARKER;

break;

}

case “polyline”: {

var drawingType = BMAP_DRAWING_POLYLINE;

break;

}

case “rectangle”: {

var drawingType = BMAP_DRAWING_RECTANGLE;

break;

}

case “polygon”: {

var drawingType = BMAP_DRAWING_POLYGON;

break;

}

case “circle”: {

var drawingType = BMAP_DRAWING_CIRCLE;

break;

}

}

// 进行绘制

if (

this.drawingManager._isOpen &&

this.drawingManager.getDrawingMode() === drawingType

) {

this.drawingManager.close();

} else {

this.drawingManager.setDrawingMode(drawingType);

this.drawingManager.open();

}

},

overlaycomplete(event) {

console.log("完成绘制：------> ", event)

console.log(this.centerPoint);

console.log(this.label);

console.log(this.polyline);

this.centerPoint = null; // 中心点

this.label = null;

this.polyline = null;

},

showCirle(event) {

// 如果中心点是null

if (this.centerPoint == null) {

this.centerPoint = event.point; // 给中心点设置新的值

this.drawingManager._mask.addEventListener(“mousemove”, this.showRadis);

// var maker = new window.BMapGL.Marker(event.point);

// this.map.addOverlay(maker);

}

},

/**

• 花半径

*/

showRadis(event) {

var radius = this.drawingManager._map.getDistance(

this.centerPoint,

event.point

);

if (!isNaN(radius)) {

this.map.removeOverlay(this.label); //清除上一个显示半径的label标注

this.map.removeOverlay(this.polyline); //清除上一个圆的半径直线

//添加文字标签

var opts = {

position: event.point, // 指定文本标注所在的地理位置（当前鼠标的位置）

offset: new window.BMapGL.Size(5, -15) //设置文本偏移量

};

this.label = new window.BMapGL.Label(

(radius / 1000).toFixed(2) + “公里”,

opts

); // 创建文本标注对象

//文本标注样式

this.label.setStyle({

color: “#438eff”,

//fontSize:‘14px’,

fontWeight: “bold”,

border: “0px solid #ccc”,

backgroundColor: “” //#2267AD

});

//从圆心画半径

this.polyline = new window.BMapGL.Polyline(

[this.centerPoint, event.point],

{

strokeColor: “red”,

strokeWeight: 2,

strokeOpacity: 0.5

}

); //后面参数为划线的样式

this.map.addOverlay(this.polyline); //添加半径直线

this.map.addOverlay(this.label); //添加label

}

}

}

};