百度地图的鼠标绘制工具

<!--加载鼠标绘制工具-->
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />//绘制的样式
var styleOptions = {strokeColor:"red",    //边线颜色。fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。strokeWeight: 3,       //边线的宽度，以像素为单位。strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。strokeStyle: 'solid' //边线的样式，solid或dashed。
}
//实例化鼠标绘制工具
var drawingManager = new BMapLib.DrawingManager(map, {isOpen: false, //是否开启绘制模式enableDrawingTool: false, //是否显示工具栏drawingToolOptions: {//工具栏的位置anchor: BMAP_ANCHOR_TOP_RIGHT, //位置offset: new BMap.Size(5, 5), //偏离值},circleOptions: styleOptions, //圆的样式polylineOptions: styleOptions, //线的样式polygonOptions: styleOptions, //多边形的样式rectangleOptions: styleOptions //矩形的样式});  //添加鼠标绘制工具的监听事件，用于获取绘制结果
drawingManager.addEventListener('overlaycomplete', function(e){overlays.push(e.overlay);
});

BMapLib.DrawingManager中的方法：

如果在实际项目中不需要工具栏，是需要点击比如某个button来开启画线的功能，可以：

//开启地图的绘制模式
drawingManager.open();
//设置地图的绘制模式
drawingManager.setDrawingMode(BMAP_DRAWING_POLYLINE );

百度地图的鼠标绘制工具相关推荐

百度地图之鼠标绘制工具条库（开源库）
百度地图开发常用网站 1.百度地图开放平台 http://lbsyun.baidu.com/ 2.百度地图 Javascript API JavaScript API v3.0 http://lbsy ...
vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具
目录引言 1.引用百度地图 2.在项目中使用百度地图 2-1.页面结构部分 2-2.js逻辑部分 3-1.页面结构部分 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架.它旨 ...
百度地图实现鼠标绘制多边形并获取所有点坐标
百度地图开放平台http://lbsyun.baidu.com/ 这里使用的是Javascript API http://lbsyun.baidu.com/index.php?title=jspopu ...
百度卫星地图无法使用鼠标绘制工具的问题简单解决方案
问题最近手上的一个有关百度地图的bug 具体是这样的: 在街道地图和自定义地图上是没问题的,可以框选提交在地球模式下,没有√×选项,没法提交解决过程首先,我觉得应该不是代码的问题,于是提了相关 ...
js百度地图鼠标绘制工具条库
本篇文章是介绍百度地图鼠标绘制工具条库基本使用百度地图的覆盖物的编辑类参考:[鼠标绘制工具条库](http://api.map.baidu.com/library/DrawingManager/1. ...
鼠标绘制工具加是否超出范围判断
初始化鼠标绘制工具的代码: //实例化鼠标绘制工具_this.drawingManager = new BMapLib.DrawingManager(_this.addMap, {isOpen: tr ...
百度地图鼠标绘制工具BUG修复(地图自动平移)
开发项目时用到了鼠标绘制工具,绘制多边形时,鼠标离开地图后,地图会自动平移.用close方法也停止不了. 看下源码中这样的代码: /*** 开启鼠标到地图边缘,自动平移地图*/Mask.prototy ...
基于百度地图的电子围栏设置工具
开源一个基于百度地图开源库"鼠标绘制工具条库"改造而来的电子围栏工具.在原来的基础上增加了基于行政区域的围栏设置方式. 界面截图: 用法为: var map = new BMap. ...
用html制作百度地图,canvas实现百度地图个性化底图绘制
精华 node-canvas实现百度地图个性化底图绘制发布于 3 年前作者 lzxue 11783 次浏览来自技术原文转自 #node-canvas实现百度地图个性化底图绘制随着nodej ...

百度地图的鼠标绘制工具

百度地图的鼠标绘制工具相关推荐

最新文章

热门文章