百度地图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 ...
随机推荐
- 20180830xlVBA_合并计算
Sub WorkbooksSheetsConsolidate() Rem 设置求和区域为 sheet名称/单元格区域;sheet名称/单元格区域 Const Setting As String = & ...
- 小程序for循环嵌套
<view class='nocontnt' wx:if="{{listLength == 0 }}"> 暂无相关评论 </view> <view c ...
- PHP单例模式实例,连接数据库对类的引用
<?php//单例模式连接数据库class pzhang{ static private $instance; private static $config; private $dbase = ...
- python记录_day04 列表 元组
今日主要内容: 列表 和 元组 列表 一.列表介绍 列表是一种能存储大量数据的数据结构,是能装对象的对象.由方括号 [] 括起来,能放任意类型的数据,数据之间用逗号隔开 列表存储数据是有顺序的 二.增 ...
- 『计算机视觉』FPN:feature pyramid networks for object detection
对用卷积神经网络进行目标检测方法的一种改进,通过提取多尺度的特征信息进行融合,进而提高目标检测的精度,特别是在小物体检测上的精度.FPN是ResNet或DenseNet等通用特征提取网络的附加组件,可 ...
- CSS Hack 技巧
IE Hack IE系列浏览器的hack大略如下: _nowamagic:1px;———–ie6 *nowamagic:1px;———–ie7 nowamagic:1px\0;———-ie89 now ...
- CF-339D-线段树
http://codeforces.com/problemset/problem/339/D 给出一个序列.每次更改其中一个值然后询问序列的f(),序列的f()定义为: 每相邻两个元素按位或得到长度减 ...
- sqlserver创建计算列 转
转 http://www.cnblogs.com/lgx5/p/6017874.html 表中其它列的计算值 创建的sql create table table1 ( number decimal(1 ...
- vmplayer桥接以及nat配置nginx
1.环境 centos6.4 vm player nginx1.8 2.虚拟机的防火墙 参考http://blog.csdn.net/qilovehua/article/details/4550713 ...
- API验证插件
前言 如果在访问某WebAPI过程中request信息被他人截获,若是get请求获取数据还好,如果是post提交数据,势必威胁数据安全,所以对于一个对安全性要求较高的API来说,对每个请求做身份验证显 ...