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

> 这个东西不好整,既要使用Vue接入百度地图,又要画圆。 ## Vue接入百度地图 Vue 接入百度地图其实是有插件的,**vue-baidu-map** 这个插件有官网,直接 npm install 就可以。

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


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


Vue接入百度地图

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

vue-baidu-map API接口 : ​​https://dafrok.github.io/vue-baidu-map/#/​

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

Vue利用百度地图画圆并且获取圆心坐标和半径_百度地图_02
在最后的 “辅助工具” 里面的 “鼠标绘制功能(GL)” 就可以绘制圆形。

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

引入原生的百度地图API

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

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=3.0&ak=这里填写你申请的key值"></script>

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

<div id="container" style="height:500px;width=700px"></div>

然后写一个方法来初始化百度地图,创建的方法在 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,但是有瑕疵,一会再说问题出在哪里。

先看官网案例: ​​http://lbsyun.baidu.com/jsdemo.htm#gl_tool_2​

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

<link href="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css" rel="stylesheet">
<script type="text/javascript" src="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>

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

<template>
<div>
<ul style="soild 1px yellow" class="drawing-panel">
<li class="bmap-btn bmap-circle" id="circle" @click="draw($event)"></li>
</ul>
<div id="container"></div>
</div>
</template>

<script>
export default {
data() {
return {
map: "", // 地图对象
drawingManager: "", // 绘制管理器
centerPoint: null, // 中心点
label: null,
polyline: null
};
},
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); // 开启鼠标滚轮缩放

var styleOptions = {
strokeColor: "#5E87DB", // 边线颜色
fillColor: "#5E87DB", // 填充颜色。当参数为空时,圆形没有填充颜色
strokeWeight: 2, // 边线宽度,以像素为单位
strokeOpacity: 1, // 边线透明度,取值范围0-1
fillOpacity: 0.2 // 填充透明度,取值范围0-1
};
var labelOptions = {
borderRadius: "2px",
background: "#FFFBCC",
border: "1px solid #E1E1E1",
color: "#703A04",
fontSize: "12px",
letterSpacing: "0",
padding: "5px"
};

// 实例化鼠标绘制工具
this.drawingManager = new window.BMapGLLib.DrawingManager(this.map, {
// isOpen: true, // 是否开启绘制模式
enableCalculate: true, // 绘制是否进行测距测面
enableSorption: TextTrackCue, // 是否开启边界吸附功能
sorptiondistance: 20, // 边界吸附距离
circleOptions: styleOptions, // 圆的样式
labelOptions: labelOptions // label样式
});

//添加鼠标绘制工具监听事件,用于获取绘制结果
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
}
}
}
};
</script>

<style>
body,
html,
#container {
width: 100%;
height: 500px;
margin: 0;
font-family: "微软雅黑";
}
ul li {
list-style: none;
}
.info {
z-index: 999;
width: auto;
min-width: 22rem;
padding: 0.75rem 1.25rem;
margin-left: 1.25rem;
position: fixed;
top: 1rem;
background-color: #fff;
border-radius: 0.25rem;
font-size: 14px;
color: #666;
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
.drawing-panel {
z-index: 999;
position: fixed;
bottom: 3.5rem;
margin-left: 2.5rem;
padding-left: 0;
border-radius: 0.25rem;
height: 47px;
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
.bmap-btn {
border-right: 1px solid #d2d2d2;
float: left;
width: 64px;
height: 100%;
background-image: url(//api.map.baidu.com/library/DrawingManager/1.4/src/bg_drawing_tool.png);
cursor: pointer;
}
.drawing-panel .bmap-marker {
background-position: -65px 0;
}
.drawing-panel .bmap-polyline {
background-position: -195px 0;
}
.drawing-panel .bmap-rectangle {
background-position: -325px 0;
}
.drawing-panel .bmap-polygon {
background-position: -260px 0;
}
.drawing-panel .bmap-circle {
background-position: -130px 0;
}
</style>

最后的效果

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

存在问题

有些问题我不好解决,就一直留着在这里总结一下,有需要的大佬看一下能不能帮忙修改一下。

  1. 点击对号之后效果是对的,但是点击叉号之后,那个自己绘制的半径和xx公里一直存在,而且在画图会受影响,但是只要点击了对号就不影响,就是因为数据没有初始化,我想获取一下点击叉号的点击事件,然后初始化一下就可以,但是不会。
  2. 鼠标把圆拖出来之后,如果在拖动圆的按键来继续扩大或减小圆的大小,这个代码就没治了,因为代码里面没有监听,关键是不知道怎么监听,真他妈的尴尬。

【参考源码】:​​https://gitee.com/wjw1014/vue_learning_vuex/blob/master/src/components/map.vue​

【版权声明】本博文著作权归作者所有,任何形式的转载都请联系作者获取授权并注明出处!

【重要说明】本文为本人的学习记录,论点和观点仅代表个人而不代表当时技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!

【Gitee地址】秦浩铖:​​https://gitee.com/wjw1014​