自定义文字

使用SimpleMarker，实现自定义图标上的文字的功能。

源代码编辑器
复制
运行
还原
          <!-- 重点参数：iconLabel, containerClassNames -->
<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/overlay/SimpleMarker/examples/custom-label.html -->
    <base href="//webapi.amap.com/ui/1.1/ui/overlay/SimpleMarker/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;
    }

    
    /**
     * 利用 containerClassNames: 'my-marker' 设置label样式
     */
    
    .amap-simple-marker.my-marker .amap-simple-marker-label {
        color: #fff;
        font-size: 16px;
        font-style: italic;
        text-decoration: line-through;
    }
    </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/SimpleMarker'], function(SimpleMarker) {

        var lngLats = getGridLngLats(map.getCenter(), 4, 4);

        new SimpleMarker({
            //普通文本
            iconLabel: 'A',

            map: map,
            position: lngLats[0]
        });

        new SimpleMarker({

            containerClassNames: 'my-marker',
            //普通文本
            iconLabel: 'BC',

            iconStyle: 'green',

            map: map,
            position: lngLats[1]
        });

        new SimpleMarker({

            //设置节点属性
            iconLabel: {
                //普通文本
                innerHTML: '热',
                //设置样式
                style: {
                    color: '#fff',
                    fontSize: '120%',
                    marginTop: '2px'
                }
            },

            iconStyle: 'red',
            map: map,
            position: lngLats[2]
        });

        new SimpleMarker({
            iconLabel: {
                //html
                innerHTML: '<div class="my-blue-point"><img src="//webapi.amap.com/theme/v1.3/hotNew.png"/></div>',
            },
            iconStyle: 'black',
            map: map,
            position: lngLats[3]
        });
    });

    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>
        
控制台
清空
示例
中心常见
问题智能
客服