字体图标标注最后更新时间: 2023年08月08日

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: 'https://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
    //....其他参数...
  });
});