示例中心
功能在线体验
控制台

高德 开发 地图 JS API 参考手册 - UI组件库 覆盖物 矢量标注

更新时间:2017年06月02日

SvgMarker(矢量标注)继承自 SimpleMarker ,支持使用Svg构建不同形状,颜色,大小的背景图标(利用SimpleMarker的iconStyle)。

注意:IE9以下浏览器不支持Svg, 此时图标样式会回退回父类,即SimpleMarker。

如何使用

1、引入UI组件库

2、加载SvgMarker(模块名:ui/overlay/SvgMarker):

//加载SvgMarker,loadUI的路径参数为模块名中 'ui/' 之后的部分
AMapUI.loadUI(['overlay/SvgMarker'], function(SvgMarker) {

    if (!SvgMarker.supportSvg) {
        //当前环境并不支持SVG,此时SvgMarker会回退到父类,即SimpleMarker
    }

    //创建一个shape实例,比如水滴状
    var shape = new SvgMarker.Shape.WaterDrop({
        height: 60, //高度
        //width: **, //不指定时会维持默认的宽高比
        fillColor: 'orange', //填充色
        strokeWidth: 1, //描边宽度
        strokeColor: '#666' //描边颜色
    });

    //利用该shape构建SvgMarker
    var marker = new SvgMarker(
        //第一个参数传入shape实例
        shape,
        //第二个参数为SimpleMarker的构造参数(iconStyle除外)
        {
            showPositionPoint: true, //显示定位点
            map: map,
            position: map.getCenter()
        }
    );
});

示例中心

接口文档

构造参数(父类

参数名称

类型

说明

shape

Shape

形状实例,具体请参见下方的Shape。

SimpleMarkerOptions

Object

SimpleMarker的构造参数但不包括iconStyle, offset),比如map, position, iconLabel等;

方法(父类

方法名称

返回值

说明

setSvgShape(shape)


更新shape实例,并基于该shape重新设定图标内容(即父类SimpleMarker的iconStyle);shape实例的引用没变,但shape的相关参数(比如width,height等)改变时也需要调用此方法。示例

静态属性

属性名称

说明

 SvgMarker.supportSvg

布尔值,标识当前浏览器环境是否支持SVG

Shape

Shape包含构造Svg所需的信息,其构造参数包括SVG自身的一些常见属性,比如:

  • width:Number,宽度
  • height:Number,高度
  • fillColor:String,填充色
  • strokeColor:String,描边色
  • strokeWidth:String,描边宽度

还包括定位点的偏移信息:

  • offset:[x:Number,y:Number],形状区域左上角相对于定位点的偏移。该值通常不直接在构造参数中写死,而是通过Shape内部实现getOffset方法动态计算。比如如果定位点在中心,可返回[-this.opts.width / 2, -this.opts.height / 2]
//创建一个shape实例,比如水滴状
var shape = new SvgMarker.Shape.WaterDrop({
    height: 60, //高度
    //width: **, //不指定,维持默认的宽高比
    fillColor: 'orange', //填充色
    strokeWidth: 1, //描边宽度
    strokeColor: '#666' //描边颜色
    //offset:[n1, n2] //这里不设置offset,偏移本身和形状的尺寸相关,WaterDrop中实现了getOffset方法,所以不需要在构造参数中写死offset。
});

SvgMarker内建了一些Shape类型(示例),包括:

基于path的Shape:

类名

简介

SvgMarker.Shape.WaterDrop

水滴形

SvgMarker.Shape.SquarePin

带尖角的方形

SvgMarker.Shape.ShieldPin

盾牌形

SvgMarker.Shape.FivePointsStar

五角星

SvgMarker.Shape.TriangleFlagPin

三角旗帜

SvgMarker.Shape.RectangleFlagPin

矩形旗帜

普通形状:

类名

简介

SvgMarker.Shape.Circle

圆形, 构造参数:半径(radius:number)

特殊类型:

类名

简介

SvgMarker.Shape.IconFont

IconFont是阿里巴巴出品的矢量图标库,其上存在大量的Marker图标可供选择。SvgMarker.Shape.IconFont基于symbol引用方式。构造参数:

  • symboljs地址(symbolJs:String, 类似 //at.alicdn.com/t/font_1473319176_4914331.js
  • 图标类名(icon:String
  • 尺寸信息(width:Number, height:Number, 如果长宽相同,可以只设置size:Number
  • 相对于定位点的偏移量(offset[x:Number,y:Number]),因图标内容的差异,offset需要开发者自主确定(可以借助父类SimpleMarker的showPositionPoint),并作为构造参数传入。 

示例

自定义Shape

基本形状

所有Shape均继承自 SvgMarker.Shape.BaseShape, 子类需要实现的核心接口有:

方法名称

返回值

说明

getInnerHTML(opts:Object)

String

返回Svg的内部构造。参数opts包含有构造参数中的内容(也可以使用this.opts),比如width,height,fillColor等:

 return '<g><path d="...opts.width...opts.height..." /></g>' 

getOffset()

Array[x:Number,y:Number]

返回形状左上角相对于定位点的偏移,比如如果定位点在中心,可返回:

[-this.opts.width / 2, -this.opts.height / 2]

getCenter()

Array[x:Number,y:Number]

返回形状的“中心”点位置,默认返回形状宽高所占矩形的中心点。该方法为辅助性质,通常用于确定iconLabel的摆放位置,不同大小的不同形状可以自主确定“中心”点位置,比如水滴形状的垂直“中心”位置取在上方1/3处:

[this.opts.width / 2, this.opts.height / 3]

自定义形状示例

Path类形状

Path类形状可以继承SvgMarker.Shape.PathShape。开发者需要在构造函数中定义原始路径(sourcePath),PathShape实现的getInnerHTML方法会根据构造参数中的widthheightsourcePath进行缩放,从而返回合适大小的path路径。原始路径的结构如下:

function MyCustomPathShape(opts) {
           opts = utils.extend({
               //定义原始路径
               sourcePath: {
                   //路径
                   path: 'M0 0 L 10 0 L 0 10 L 10 10 z',
                   //宽度
                   width: 10,
                   //高度
                   height: 10
               }
           }, opts);
          //...后续逻辑...
 }

细节请参见:自定义Path类形状示例水滴形状实现

移动端
示例中心
功能
在线体验
常见问题