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

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

更新时间:2017年06月02日

AwesomeMarker(字体图标标注)继承自 SimpleMarker ,支持使用 Font Awesome 来标识SimpleMarker的前景内容(利用SimpleMarker的iconLabel)。

目前使用的FontAwesome版本为 4.7.0 ,如需其他版本(比如支持ie7的3.2.1)或者页面中已经引入了FontAwesome,请参见下方“引入自部署的FontAwesome”部分。

如何使用

1、引入UI组件库

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

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

    new AwesomeMarker({

        //设置awesomeIcon
        awesomeIcon: 'arrows', //可用的icons参见: http://fontawesome.io/icons/

        //下列参数继承自父类

        //iconLabel中不能包含innerHTML属性(内部会利用awesomeIcon自动构建)
        iconLabel: {
            style: {
                color: '#333' //设置颜色
            }
        },
        iconStyle: 'orange', //设置图标样式

        //基础的Marker参数
        map: map,
        position: map.getCenter()
    });
});

 示例中心 

接口文档

构造参数(父类

参数名称

类型

说明

awesomeIcon

String

icon的名称; 可用的icons参见 Font Awesome 官网

getClassnamesOfAwesomeIcon

Function

可选,返回字体节点上的classNames。默认的实现如下:


function ( awesomeIcon ) {
	return 'fa fa-' +  awesomeIcon;
}


使用FontAwesome以外的图标资源(比如IconFont)时,可设置此方法,示例

方法(父类

方法名称

返回值

说明

setAwesomeIcon(awesomeIcon:String)


设置awesomeIcon

调整字体样式

通过设置 iconLabel 参数(继承自父类SimpleMarker,但不能包括包含innerHTML属性),可以调整字体的样式,比如颜色,大小等:

new AwesomeMarker({
    //iconLabel中不能包含innerHTML属性(内部会利用awesomeIcon自动构建)
    iconLabel: {
        style: {
            color: '#333', //设置颜色
            fontSize: '14px' //设置字号
        }
    },
   //...其他参数...
});

示例

调整图标样式

通过设置 iconStyle 参数(继承自父类SimpleMarker),可以调整背景图标的样式,比如:

new AwesomeMarker({
       iconStyle: {
            src: 'http://webapi.amap.com/theme/v1.3/markers/b/mark_b.png',
            style: {
                width: '20px',
                height: '30px'
            }
     }
   //...其他参数...
});

示例

引入自部署的FontAwesome

如果您的页面已经引用了FontAwesome,或者对版本有特殊要求,可以使用自己部署的css资源,比如my-font-awesome.css:

首先在页面上引入自己的fontAwesome CSS:

<link rel="stylesheet" href="//...my-font-awesome.css">

然后,在js代码中,阻止默认的css加载(原理参见这里):

//覆写内部引用的css模块定义,阻止AwesomeMarker加载该css资源;
AMapUI.define("polyfill/require/require-css/css!plug/ext/font-awesome/css/font-awesome", [], function() {
    //留空即可
});

AMapUI.loadUI(['overlay/AwesomeMarker'],function(AwesomeMarker) {
  new AwesomeMarker({
    awesomeIcon: 'arrows', //my-font-awesome.css中包含的icon
    //....其他参数...
  });
});

示例

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