html圆形圆心坐标,Vue利用百度地图画圆并且获取圆心坐标和半径

Vue利用百度地图画圆并且获取圆心坐标和半径

这个东西不好整，既要使用Vue接入百度地图，又要画圆。

Vue接入百度地图

Vue 接入百度地图其实是有插件的，vue-baidu-map 这个插件有官网，直接 npm install 就可以。

然后教程啥的都写的很清晰，包括安装和使用，自己就接进去了，但是画圆获取圆心坐标和半径有点问题，可能不满足这个需求，所以说就得用百度地图官网的API接口，看一眼：

在最后的 “辅助工具” 里面的 “鼠标绘制功能(GL)” 就可以绘制圆形。

所以说我们首先得在Vue项目中引入原生的百度API接口。

引入原生的百度地图API

在 index.html 文件中引入百度地图API连接

在使用地图的组件里面创建一个div用来展示地图，记住，一定要给这个div设置宽和高，不然显示不出来，不要太相信100%的方式设置宽高。

然后写一个方法来初始化百度地图，创建的方法在 created 里面调用

mounted() {

this.init();

},

methods: {

init() {

this.map = new window.BMapGL.Map("container", { enableMapClick: false }); // 创建Map实例,GL版命名空间为BMapGL(鼠标右键控制倾斜角度)

this.map.centerAndZoom(new window.BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别

this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

}

}

注意哈，BMap可能找不到，也许是一定找不到，会说没有找到方法之类的错，记住，在BMap这些百度自带的对象前面加 window. 就可以了，就像上面一样。

好了，按照上面的样子，百度地图就引进来了，但是哈，不建议这样用，用插件就可以，特别好，但是呢，因为这个项目需求不能使用插件，因为插件不支持画圆获取坐标的功能，只能这样凑合着用。

画圆获取中心点坐标和半径

然后就是画圆了，这个东西不好整，官网给的demo就是单纯的画一个圆，没有说怎么拿到中心点坐标和半径，尽管给你展示出来了，但好像没有给提供接口拿数据，也是做了很多的准备，查阅了很多的资料才整理出来一个小的demo，但是有瑕疵，一会再说问题出在哪里。

首先在 index.html 文件中引入需要的 js 文件，就写在上一个需要你填key值得那句代码下面就行：

然后在需要使用地图画圈的组件写成下面这样，我懒得一点一点的弄了，直接粘全部的代码：

export default {

data() {

return {

map: "", // 地图对象

drawingManager: "", // 绘制管理器

centerPoint: nu