Vue利用百度地图画圆并且获取圆心坐标和半径 |
您所在的位置：网站首页 › 百度地图画线测距怎么用不了 › Vue利用百度地图画圆并且获取圆心坐标和半径 |
Vue利用百度地图画圆并且获取圆心坐标和半径
|
Vue利用百度地图画圆并且获取圆心坐标和半径
这个东西不好整，既要使用Vue接入百度地图，又要画圆。 Vue接入百度地图Vue 接入百度地图其实是有插件的，vue-baidu-map 这个插件有官网，直接 npm install 就可以。 vue-baidu-map API接口 ： https://dafrok.github.io/vue-baidu-map/#/ 然后教程啥的都写的很清晰，包括安装和使用，自己就接进去了，但是画圆获取圆心坐标和半径有点问题，可能不满足这个需求，所以说就得用百度地图官网的API接口，看一眼：
所以说我们首先得在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，但是有瑕疵，一会再说问题出在哪里。 先看官网案例： http://lbsyun.baidu.com/jsdemo.htm#gl_tool_2 首先在 index.html 文件中引入需要的 js 文件，就写在上一个需要你填key值得那句代码下面就行： 然后在需要使用地图画圈的组件写成下面这样，我懒得一点一点的弄了，直接粘全部的代码： 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 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 } } } }; 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; } 最后的效果
有些问题我不好解决，就一直留着在这里总结一下，有需要的大佬看一下能不能帮忙修改一下。 点击对号之后效果是对的，但是点击叉号之后，那个自己绘制的半径和xx公里一直存在，而且在画图会受影响，但是只要点击了对号就不影响，就是因为数据没有初始化，我想获取一下点击叉号的点击事件，然后初始化一下就可以，但是不会。鼠标把圆拖出来之后，如果在拖动圆的按键来继续扩大或减小圆的大小，这个代码就没治了，因为代码里面没有监听，关键是不知道怎么监听，真尴尬。【参考源码】：https://gitee.com/wjw1014/vue_learning_vuex/blob/master/src/components/map.vue |
在最后的 “辅助工具” 里面的 “鼠标绘制功能(GL)” 就可以绘制圆形。
【本文地址】
今日新闻 |
推荐新闻 |