js百度地图鼠标绘制工具条库

本篇文章是介绍百度地图鼠标绘制工具条库基本使用

  百度地图的覆盖物的编辑类参考:[鼠标绘制工具条库](http://api.map.baidu.com/library/DrawingManager/1.4/docs/symbols/BMapLib.DrawingManager.html)该工具的功能大致分为：1. 点2. 线3. 多边形4. 矩形5. 圆形6. 拖动

基本的代码示例

//此处的功能作用就不一一介绍了  上面的类参考文档里面有详细解释
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);var myDrawingManagerObject = new BMapLib.DrawingManager(map, {isOpen: true, drawingType: BMAP_DRAWING_MARKER, //默认激活的 选项enableDrawingTool: true,enableCalculate: false,drawingToolOptions: {anchor: BMAP_ANCHOR_TOP_LEFT,// 鼠标构建工具的位置offset: new BMap.Size(5, 5), //此处是相对于地图页面的偏离位置drawingTypes : [BMAP_DRAWING_MARKER,BMAP_DRAWING_CIRCLE,BMAP_DRAWING_POLYLINE,BMAP_DRAWING_POLYGON,BMAP_DRAWING_RECTANGLE ]},polylineOptions: {strokeColor: "#333"});

一、绘制结束后后的事件

//监听事件结束后可以使用
myDrawingManagerObject.addEventListener("事件的名字",fn);
//在fn这个函数里面 会有这个覆盖物的基本信息 drawingManager.addEventListener('overlaycomplete', overlaycomplete);var overlaycomplete = function(e){console.log(e)//若果绘制的是多边形想要得到每个点的坐标//可以有以下几种方法overlays.push(e.overlay);var path = e.overlay.getPath()console.log(path,"覆盖物的坐标点的集合")console.log(e.overlay.so,"覆盖物坐标的集合")}

二、覆盖物的删除

//覆盖物的删除有两种方法
1.第一种是
map.clearOverlays() //删除所有覆盖物
//此方法会删除所有的覆盖物 若是不想删除某个或者某一类覆盖物 可以再覆盖物创建的时候添加禁止删除的属性
disableMassClear() //禁止覆盖物在map.clearOverlays方法中被清除
enableMassClear()  //允许覆盖物在map.clearOverlays方法中被清除
2.第二种是
removeOverlay()  //从地图中移除覆盖物。如果覆盖物从未被添加到地图中，则该移除不起任何作用
//此方法多数用在点击事件之中   用该覆盖物的的点击事件找到该覆盖物 然后删除  只会删除一个

三、鼠标构建工具的点击事件

在实例化的页面中f12 查看元素并且选中 鼠标构建工具的实例 会找到每一个工具的dom元素  然后在js中 直接对dom元素进行绑定事件就可以了

具体操作如下：


let dom = document.getElementByClassName("BMapLib_box")[1]dom.onClick=function(){console.log("多边形点击了  ")
}

本次百度地图的鼠标绘制工具就简单介绍到这里，第一次发文章有什么瑕疵欢迎大家评论吐槽，或者其他方面想知道的也可以一起讨论

js百度地图鼠标绘制工具条库相关推荐

百度地图之鼠标绘制工具条库（开源库）
百度地图开发常用网站 1.百度地图开放平台 http://lbsyun.baidu.com/ 2.百度地图 Javascript API JavaScript API v3.0 http://lbsy ...
百度地图鼠标绘制工具BUG修复(地图自动平移)
开发项目时用到了鼠标绘制工具,绘制多边形时,鼠标离开地图后,地图会自动平移.用close方法也停止不了. 看下源码中这样的代码: /*** 开启鼠标到地图边缘,自动平移地图*/Mask.prototy ...
百度地图 -- 鼠标绘制工具DrawingManager
优先附上DrawingManager参考的API文档: http://api.map.baidu.com/library/DrawingManager/1.4/docs/symbols/BMapLib ...
百度地图鼠标绘制获取坐标点
开发有时需要在百度地图上拾取多个坐标,利用官方上的开源库,改造,在页面上打点或者画框获取坐标,如下图选择工具选择工具后在地图上画好,后就可以滚动到页面下方复制坐标点了,如下图源码查看:https ...
js百度地图鼠标移上覆盖物时省市区高亮，移走时恢复
鼠标移入事件 mouseoverMark (area) {//加了定时器是防止频繁触发移入事件clearTimeout(this.c);this.c = setTimeout(() => {// ...
百度地图鼠标经过图层时高亮显示图标及标签内容
百度地图开发常用网站 1.百度地图开放平台 http://lbsyun.baidu.com/ 2.百度地图 Javascript API JavaScript API v3.0 http://lbsy ...
百度地图的鼠标绘制工具
 <script type="text/javascript" src="http://api.map.baidu.com ...
鼠标绘制工具加是否超出范围判断
初始化鼠标绘制工具的代码: //实例化鼠标绘制工具_this.drawingManager = new BMapLib.DrawingManager(_this.addMap, {isOpen: tr ...
Android高效率编码-第三方SDK详解系列(一)——百度地图，绘制，覆盖物，导航，定位，细腻分解！...
Android高效率编码-第三方SDK详解系列(一)--百度地图,绘制,覆盖物,导航,定位,细腻分解! 这是一个系列,但是我也不确定具体会更新多少期,最近很忙,主要还是效率的问题,所以一些有效的东西还 ...

js百度地图鼠标绘制工具条库

本篇文章是介绍百度地图鼠标绘制工具条库基本使用

基本的代码示例

一、绘制结束后后的事件

二、覆盖物的删除

三、鼠标构建工具的点击事件

js百度地图鼠标绘制工具条库相关推荐

最新文章

热门文章