字体样式

使用AwesomeMarker，展示awesomeIcon。

源代码编辑器
<!-- 重点参数：iconLabel -->
<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/overlay/AwesomeMarker/examples/iconLabel.html -->
    <base href="//webapi.amap.com/ui/1.1/ui/overlay/AwesomeMarker/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>字体样式</title>
    <style>
    html,
    body,
    #container {
        width: 100%;
        height: 100%;
        margin: 0px;
    }
    </style>
</head>

<body>
    <div id="container"></div>
    <script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=您申请的key值'></script>
    <!-- UI组件库 1.0 -->
    <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
    
    <script type="text/javascript">
    //创建地图
    var map = new AMap.Map('container', {
        zoom: 4
    });

    AMapUI.loadUI(['overlay/AwesomeMarker'],
        function(AwesomeMarker) {

            //icon的取值请见  http://fontawesome.io/icons/
            var awIcons = [
                'address-book',
                'address-book-o',
                'address-card',
                'address-card-o',
                'adjust',
                'american-sign-language-interpreting',
                'anchor',
                'archive',
                'area-chart',
                'arrows',
                'arrows-h',
                'arrows-v',
                'asl-interpreting',
                'assistive-listening-systems',
                'asterisk'
            ];

            var colors = [
                "#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c", "#98df8a",
                "#d62728", "#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94",
                "#e377c2", "#f7b6d2", "#7f7f7f", "#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf", "#9edae5",
                "#393b79", "#5254a3", "#6b6ecf", "#9c9ede", "#637939", "#8ca252", "#b5cf6b", "#cedb9c", "#8c6d31",
                "#bd9e39", "#e7ba52", "#e7cb94", "#843c39", "#ad494a", "#d6616b", "#e7969c", "#7b4173", "#a55194", "#ce6dbd", "#de9ed6",
                "#3182bd", "#6baed6", "#9ecae1", "#c6dbef", "#e6550d", "#fd8d3c", "#fdae6b", "#fdd0a2", "#31a354", "#74c476",
                "#a1d99b", "#c7e9c0", "#756bb1", "#9e9ac8", "#bcbddc", "#dadaeb", "#636363", "#969696", "#bdbdbd", "#d9d9d9"
            ];

            //获取一批grid排布的经纬度
            var lngLats = getGridLngLats(map.getCenter(), 5, awIcons.length);

            for (var i = 0, len = lngLats.length; i < len; i++) {

                new AwesomeMarker({

                    //设置awesomeIcon
                    awesomeIcon: awIcons[i],

                    iconLabel: {
                        style: {
                            color: colors[i], //字体颜色
                            fontSize: 10 + i + 'px' //字号
                        }
                    },

                    //图标
                    iconStyle: 'black',

                    map: map,
                    position: lngLats[i]

                });

            }

        });

    AMap.plugin(['AMap.ToolBar'], function() {
        map.addControl(new AMap.ToolBar({
            map: map
        }));
    });

    /**
     * 返回一批网格排列的经纬度

     * @param  {AMap.LngLat} center 网格中心
     * @param  {number} colNum 列数
     * @param  {number} size  总数
     * @param  {number} cellX  横向间距
     * @param  {number} cellY  竖向间距
     * @return {Array}  返回经纬度数组
     */
    function getGridLngLats(center, colNum, size, cellX, cellY) {

        var pxCenter = map.lnglatToPixel(center);

        var rowNum = Math.ceil(size / colNum);

        var startX = pxCenter.getX(),
            startY = pxCenter.getY();

        cellX = cellX || 70;

        cellY = cellY || 70;


        var lngLats = [];

        for (var r = 0; r < rowNum; r++) {

            for (var c = 0; c < colNum; c++) {

                var x = startX + (c - (colNum - 1) / 2) * (cellX);

                var y = startY + (r - (rowNum - 1) / 2) * (cellY);

                lngLats.push(map.pixelToLngLat(new AMap.Pixel(x, y)));

                if (lngLats.length >= size) {
                    break;
                }
            }
        }
        return lngLats;
    }
    </script>
</body>

</html>
控制台
清空
返回顶部示例中心常见问题智能客服