百度地图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 ...
随机推荐
- 20190104xlVBA_在课表里标记自己的课程
Sub TagMyCourses() Const HEAD_ROW = 3 With ActiveSheet endrow = .Cells.Find("*", .Cells(1, ...
- android-------Android Studio使用MAT分析工具遇到的错误
今天主要介绍一下我使用MAT工具分析文件时遇到的一个错误 Error opening heap dump 'a.hprof'. Check the error log for further deta ...
- scrapy 爬虫框架(一)
一 . scrapy 的安装 安装scrapy框架时,需要先安装依赖包. #Linux: pip3 install scrapy #Windows: a. pip3 install wheel b. ...
- pre打印
echo "<pre>";print_r(var);echo "</pre>";
- 文件名简体转繁体bat
@echo off rem 指定文件夹路径 set "fd=D:\下载的图片" rem 0为转换文件名,1为转换文件夹名,2为同时转换文件名和文件夹名 set f=0 rem 0为 ...
- Spring boot(六)优雅使用mybatis
orm框架的本质是简化编程中操作数据库的编码,发展到现在基本上就剩两家了,一个是宣称可以不用写一句SQL的hibernate,一个是可以灵活调试动态sql的mybatis,两者各有特点,在企业级系统开 ...
- Mac OS下安装和配置MongoDB
安装和配置教程: 参考地址:https://blog.csdn.net/yibowanbo/article/details/80233030 可视化管理工具: 地址:https://blog.csdn ...
- 数据库恢复(database restore)之兵不血刃——半小时恢复客户数据库
昨天,一个客户打打来电话,说他们的数据库坏了,不能用了,需要我帮助恢复下,这马上要放假了,居然出了这事儿,自己也不太喜欢恢复数据库这类,尤其是他们的数据库是个win上的库,但心里很清楚,客户比咱着急, ...
- burpsuite拦截https数据包(Firefox)
1.配置浏览器对http/https都使用burpsuite代理 http和https是分开的,对http使用了代理并不代表对https也使用了代理,要配置浏览器让其对https也使用同样的代理. 当 ...
- git通过diff文件,合并未上传代码库代码
今天有段代码需要从别人的机器上同步到本地,但是这段代码还没上库,所以要么将这部分代码打包传过来,或者,用下面的办法. 由于代码修改涉及多个文件,打包搞过来确实比较麻烦,在网上找了下,发现可以用git ...