百度地图API示例:鼠标绘制点线面 控件修改
需求 :在使用地图API时,绘制工具栏控件想自己选择哪些要,哪些不要。
可以查看相应的类:官网地址: http://api.map.baidu.com/library/DrawingManager/1.4/docs/symbols/BMapLib.DrawingManager.html#constructor
{Map} map
- Baidu map的实例对象
- {Json Object} opts
- 可选的输入参数,非必填项。可输入选项包括:
{"isOpen" : {Boolean} 是否开启绘制模式
"enableDrawingTool" : {Boolean} 是否添加绘制工具栏控件,默认不添加
"drawingToolOptions" : {Json Object} 可选的输入参数,非必填项。可输入选项包括
"anchor" : {ControlAnchor} 停靠位置、默认左上角
"offset" : {Size} 偏移值。
"scale" : {Number} 工具栏的缩放比例,默认为1
"drawingModes" : {DrawingType} 工具栏上可以选择出现的绘制模式,将需要显示的DrawingType以数组型形式传入,如[BMAP_DRAWING_MARKER, BMAP_DRAWING_CIRCLE] 将只显示画点和画圆的选项
"enableCalculate" : {Boolean} 绘制是否进行测距(画线时候)、测面(画圆、多边形、矩形)
"markerOptions" : {CircleOptions} 所画的点的可选参数
"circleOptions" : {CircleOptions} 所画的圆的可选参数
"polylineOptions" : {CircleOptions} 所画的线的可选参数
"polygonOptions" : {PolygonOptions} 所画的多边形的可选参数
"rectangleOptions" : {PolygonOptions} 所画的矩形的可选参数
如何使用:
//实例化鼠标绘制工具
var drawingManager = new BMapLib.DrawingManager(map, {
isOpen: false, //是否开启绘制模式
enableDrawingTool: true, //是否显示工具栏
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(20, 20), //偏离值
/!* drawingModes : [BMAP_DRAWING_MARKER, BMAP_DRAWING_CIRCLE],*!/
drawingModes : [BMAP_DRAWING_RECTANGLE,BMAP_DRAWING_CIRCLE], //设置只显示画矩形、圆的模式
drawingTypes : [
BMAP_DRAWING_MARKER,//点的样式
BMAP_DRAWING_CIRCLE,//圆的样式
BMAP_DRAWING_POLYLINE,//线的样式
BMAP_DRAWING_POLYGON,//多边形的样式
BMAP_DRAWING_RECTANGLE //矩形的样式
]
},
circleOptions: styleOptions, //圆的样式
polylineOptions: styleOptions, //线的样式
polygonOptions: styleOptions, //多边形的样式
rectangleOptions: styleOptions //矩形的样式
});
修改前默认工具控件都存在:如图:

修改后:
百度地图API示例:鼠标绘制点线面 控件修改的更多相关文章
- 百度地图API示例之设置级别setZoom与禁止拖拽disableDragging
百度地图API示例之设置级别setZoom与禁止拖拽disableDragging 设置级别 <html> <head> <meta http-equiv="C ...
- 百度地图API示例之添加/删除工具条、比例尺控件
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 百度地图API示例之添加定位相关控件
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 百度地图API示例之添加自定义控件
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 百度地图API示例之移动地图
级别为6 级别为8 级别为12 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...
- 百度地图API示例之根据城市名设置地图中心点
代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con ...
- 百度地图API示例之设置地图最大、最小级别
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 百度地图API示例之设置地图显示范围
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 百度地图API示例之文本标注
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
随机推荐
- (Gorails视频)使用推广链接(params[:ref]),增加注册用户!
用一个链接进行用户的注册推广: 我的git: https://github.com/chentianwei411/embeddable_comments 用途:比如推广,拉朋友注册,给推广码,用这 ...
- 20165309 实验一 Java开发环境的熟悉
20165309 实验一 Java开发环境的熟悉 一.实验内容及步骤 (一)命令行下Java程序开发 在Linux下用ctrl+alt+T打开终端,用mkdir创建文件夹后cd进入. 在vim下键入如 ...
- python-跨域问题
跨域:因为浏览器的同源策略,在你请求返回的时候会进行拦截 jsonp 只能发 get 请求 cors 可以发任何请求 ,在响应时加个响应头就行 同源策略对ajax阻拦 同源策略对src或href属性的 ...
- oracle 自动备份
此次操作是每分钟备份一张表到新表(测试) 准备: 有一张表name是test 注意事项: 1.任务中调用需要显示声明权限 AUTHID CURRENT_USER 或赋予相应权限 2.单独调用过程成功, ...
- ssm的web项目,浏览器使用get方法传递中文参数时,出现乱码
ssm的web项目,浏览器使用get链接传递的为中文参数时,出现乱码 做搜索功能时,搜索手机,那么浏览器传递的参数为中文参数“手机”,但传递的默认编码格式为iso-8859-1,所以传到后台时,是乱码 ...
- 【转】JS常用函数整合库 lutils
lutils 此工具包是在 outils 的基础上,加上个人平时收集的代码片段进行的二次整合 outils的GitHub:https://github.com/proYang/outils/blob/ ...
- git 从远程拉取代码、推代码的步骤
(注:如果是几个人共同管理项目,并且你的队友在你之前推过代码,那你就需要 git pull 一下,把代码拉到本地,解决一下冲突,再执行以下步骤,将本地代码推到远程仓库.) 第一步:查看当前的git仓库 ...
- net core 上传并使用EPPlus导入Excel文件
1. cshtml页面 form <form id="form" method="post" action="/SaveValueBatch& ...
- hashlib 库
hashlib 库 hash 是一种算法,用来接收一系列数据,经过计算后得到一个hash值 hash值的三大特征: 1. 如果传入的数据一样,得到的hash值一样 2. 只要采用的hash算法固定,无 ...
- fiddler 抓包配置
1.我们安装完成后点击运行程序,就可以看到如下图,这是进入Fildder的第一个界面. 2.安装好后打开fiddler→选择 Tools >Fildder Options > Https ...