百度离线地图 教程

矢量图标及类参考

编辑时间:2017-03-03

bbb.jpg



上图效果JS代码示例:

<script type="text/javascript">
       
// 创建Map实例
       
var map = new BMap.Map("allmap", {enableMapClick:false});
       
// 设置地图背景色为白色
       
map.getContainer().style.background = '#FFF';
       
var point = new BMap.Point(104.074362,30.540276);
       
map.centerAndZoom(point, 5);

       
var vectorFCArrow = new BMap.Marker(new BMap.Point(point.lng-0.01,point.lat), {
       
// 初始化方向向上的闭合箭头
       
icon: new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_CLOSED_ARROW, {
        scale:
5,
       
strokeWeight: 1,
       
rotation: 90,//顺时针旋转90
       
fillColor: 'red',
       
fillOpacity: 0.5
       
})
        })
;

       
map.addOverlay(vectorFCArrow);
       
// 隐藏方法
       
function hide(){
        vectorFCArrow.hide()
;
       
}
       
// 显示方法
       
function show(){
        vectorFCArrow.show()
;
       
}
</script>

类参考

Symbol

此类表示通过svg的path string创建的矢量图标类。

构造函数描述
Symbol(path: String | SymboShapeType, opts: SymbolOptions)创建一个矢量图标实例。path为svg中的path字符串或者已定义的符号常量,opts为矢量图标的样式
方法返回值描述
setPath(path: string | SymbolShape)none设置矢量图标的路径
setAnchor(anchor: Size)none设置矢量图标的定位点,该定位点的位置以图标自身为基准
setRotation(rotation: number)none设置矢量图标的旋转角度,参数为角度
setScale(scale: number)none设置矢量图标的缩放比例
setStrokeWeight(strokeWeight: number)none设置矢量图标的线宽
setStrokeColor(color: string)none设置矢量图标的线填充颜色,支持颜色常量字符串、十六进制、RGB、RGBA等格式
setStrokeOpacity(opacity: number)none设置矢量图标线的透明度,opacity范围0~1
setFillOpacity(opacity: number)none设置矢量图标填充透明度,opacity范围0~1
setFillColor(color: string)none设置矢量图标的填充颜色。支持颜色常量字符串、十六进制、RGB、RGBA等格式

SymbolOptions

此类表示Symbol构造函数的可选参数。它没有构造函数,但可通过对象字面量形式表示。

属性类型描述
anchorSize符号的位置偏移值
fillColorstring设置矢量图标的填充颜色。支持颜色常量字符串、十六进制、RGB、RGBA等格式
fillOpacityNumber设置矢量图标填充透明度,范围0~1
scaleNumber设置矢量图标的缩放比例
rotationNumber设置矢量图标的旋转角度,参数为角度
strokeColorstring设置矢量图标的线填充颜色,支持颜色常量字符串、十六进制、RGB、RGBA等格式
strokeOpacityNumber设置矢量图标线的透明度,opacity范围0~1
strokeWeightNumber旋设置线宽。如果此属性没有指定,则线宽跟scale数值相同

SymbolShapeType

此枚举类型表示矢量图标类预设的图标样式

常量描述
BMap_Symbol_SHAPE_CIRCLE圆形,默认半径为1px
BMap_Symbol_SHAPE_RECTANGLE矩形,默认宽度4px、高度2px
BMap_Symbol_SHAPE_RHOMBUS菱形,默认外接圆半径10px
BMap_Symbol_SHAPE_STAR五角星,五角星外接圆半径为10px
BMap_Symbol_SHAPE_BACKWARD_CLOSED_ARROW箭头方向向下的闭合箭头
BMap_Symbol_SHAPE_FORWARD_CLOSED_ARROW箭头方向向上的闭合箭头
BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW箭头方向向下的非闭合箭头
BMap_Symbol_SHAPE_FORWARD_OPEN_ARROW箭头方向向上的非闭合箭头
BMap_Symbol_SHAPE_POINT定位点图标
BMap_Symbol_SHAPE_PLANE预设的飞机形状
BMap_Symbol_SHAPE_CAMERA预设的照相机形状
BMap_Symbol_SHAPE_WARNING预设的警告符号
BMap_Symbol_SHAPE_SMILE预设的笑脸形状
BMap_Symbol_SHAPE_CLOCK预设的钟表形状