自定义主题

自定义缩放(Zoom)，图层切换(LayerSwitcher)，交通图控件(Traffic)的样式。

源代码编辑器
复制
运行
还原
          <!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/control/BasicControl/examples/custom-theme.html -->
    <base href="//webapi.amap.com/ui/1.1/ui/control/BasicControl/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;
        font-size: 13px;
    }
    /* 定义 my-red 主题 */
    
    .amap-ui-control-theme-my-red .amap-ui-control-layer {
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
        background: red;
    }
    
    .amap-ui-control-theme-my-red .amap-ui-control-layer-expanded {
        color: #fff;
        background: red;
    }
    
    .amap-ui-control-theme-my-red .amap-ui-control-layer-toggle {
        color: #fff;
    }
    </style>
</head>

<body>
    <div class="container" 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>
    <style>

    </style>
    <script type="text/javascript">
    var map = new AMap.Map('container');

    AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {

        var layerCtrl = new BasicControl.LayerSwitcher({
            //my-red 见上方style
            theme: 'my-red',
            position: 'tr'
        });

        map.addControl(layerCtrl);


        //缩放控件
        map.addControl(new BasicControl.Zoom({
            //内置的dark主题
            theme: 'dark',

            //左下角
            position: 'bl'
        }));

        //动态加载css
        AMapUI.loadCss('./zoom-green.css', function() {

            var zoomCtrl = new BasicControl.Zoom({
                //见zoom-green.css
                theme: 'my-green',
                position: 'br',
                showZoomNum: true
            });

            map.addControl(zoomCtrl);
        });
    });
    </script>
</body>

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