更新图标和文字

使用SimpleMarker.setIconLabel更新图标和文字。

源代码编辑器

<!-- 重点参数：setIconStyle, setIconLabel -->
<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.0/ui/overlay/SimpleMarker/examples/set-icon-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;
    }

    .amap-marker-label {
        font-size: 13px;
        border: 1px solid orange;
        background: #fff;
        border-radius: 10px 0 0 0;
        color: #690441;
    }
    </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
    });


    function initPage(SimpleMarker) {
        //内置的样式
        var iconStyles = SimpleMarker.getBuiltInIconStyles('fresh');

        var iconIdx = 0;

        var marker = new SimpleMarker({

            iconTheme: 'fresh',

            //使用内置的iconStyle
            iconStyle: iconStyles[iconIdx],

            //图标文字
            iconLabel: {
                //A,B,C.....
                innerHTML: String.fromCharCode('A'.charCodeAt(0) + iconIdx),
                style: {
                    //颜色, #333, red等等，这里仅作示例，取iconStyle中首尾相对的颜色
                    color: '#fff'
                }
            },

            //显示定位点
            //showPositionPoint:true,

            map: map,
            position: map.getCenter()
        });

        function switchIcon() {

            iconIdx = (++iconIdx) % iconStyles.length;

            marker.setIconStyle(iconStyles[iconIdx]);

            marker.setIconLabel({
                innerHTML: String.fromCharCode('A'.charCodeAt(0) + iconIdx)
            });
        }

        setInterval(switchIcon, 500);

    }

    //加载SimpleMarker
    AMapUI.loadUI(['overlay/SimpleMarker'], function(SimpleMarker) {
        initPage(SimpleMarker);
    });
    
    </script>
</body>

</html>

控制台

清空

示例
中心常见
问题智能
客服