图标主题

使用SimpleMarker，展示不同主题的图标。

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

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/overlay/SimpleMarker/examples/themes.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 #b8b8b8;
        background: #fff;
        border-radius: 6px 6px 6px 0;
        color: #777;
        line-height: 130%;
    }

    #ctrlBox {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 99999;
        line-height: 200%;
        font-size: 13px;
        background: rgba(0, 0, 0, 0.7);
        color: #FFEB3B;
        padding: 3px 10px;
        border-radius: 5px;
    }

    #ctrlBox label {
        display: block;
    }

    #ctrlBox input {
        vertical-align: middle;
    }
    </style>
</head>

<body>
    <div id="container"></div>
    <div id="ctrlBox">
        <label id="themesBox">切换主题：
            <select id="themesList">
                <option value="default">default</option>
                <option value="fresh">fresh</option>
                <option value="numv1" data-no-txt="1">numv1</option>
                <option value="numv2" data-no-txt="1">numv2</option>
            </select>
        </label>
        <label>
            显示定位点：
            <input type="checkbox" id="showPos" value="1" />
        </label>
    </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 getParameterByName(name) {
        var match = new RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
        return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
    }

    function addMarkers(SimpleMarker, $) {


        var $selTheme = $("#themesList option").filter(function() {
            return this.selected;
        });

        var theme = $selTheme.attr('value');

        var noLabel = !!$selTheme.attr('data-no-txt');


        //内置的样式
        var iconStyles = SimpleMarker.getBuiltInIconStyles(theme);

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

        var markers = [];

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

            var marker = new SimpleMarker({
                iconTheme: theme,
                //使用内置的iconStyle
                iconStyle: iconStyles[i],

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

                //显示定位点
                showPositionPoint: $('#showPos').is(':checked'),

                map: map,
                position: lngLats[i],

                //Marker的label(见https://lbs.amap.com/api/javascript-api/reference/overlay/#Marker)
                label: {
                    content: iconStyles[i],
                    //offset: new AMap.Pixel(32, 25)
                }
            });

            markers.push(marker);
        }

        return markers;
    }


    var globalMarkers = [];

    //加载SimpleMarker
    AMapUI.load(['ui/overlay/SimpleMarker', 'lib/$'], function(SimpleMarker, $) {

        var themeId = getParameterByName('tid');

        if (themeId) {
            $("#themesList").val(themeId);
        }

        function refreshMarkers() {

            //清除现有的marker
            for (var i = 0, len = globalMarkers.length; i < len; i++) {
                globalMarkers[i].setMap(null);
            }

            globalMarkers = addMarkers(SimpleMarker, $);
        }


        refreshMarkers();

        $('#themesList, #showPos').on('change', refreshMarkers);

        window.SimpleMarker = SimpleMarker;
    });

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

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