各类形状

使用SvgMarker自定义各类矢量形状。

源代码编辑器
<!-- 重点：SvgMarker.Shape -->
<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/overlay/SvgMarker/examples/all-shapes.html -->
    <base href="//webapi.amap.com/ui/1.1/ui/overlay/SvgMarker/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/SvgMarker'], function(SvgMarker) {

        if (!SvgMarker.supportSvg) {
            //当前环境并不支持SVG，此时SvgMarker会回退到父类，即SimpleMarker
            alert('当前环境不支持SVG');
        }

        //just some colors
        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",
            "#3182bd", "#6baed6", "#9ecae1", "#c6dbef", "#e6550d", "#fd8d3c", "#fdae6b", "#fdd0a2", "#31a354",
            "#a1d99b", "#c7e9c0", "#756bb1", "#9e9ac8", "#bcbddc", "#dadaeb", "#636363", "#969696", "#bdbdbd"
        ];

        //SvgMarker.Shape下的Shape 
        var shapeKeys = [
            'WaterDrop',
            'ShieldPin',
            'SquarePin',
            'TriangleFlagPin',
            'RectangleFlagPin',
            'FivePointsStar',
            'Circle',
            'IconFont'
        ];

        var colNum = 5,
            rowNum = shapeKeys.length,
            markers = [];

        var pxCenter = map.lnglatToPixel(map.getCenter());

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

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

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

                var idx = r * colNum + c;

                if (!colors[idx]) {
                    continue;
                }

                var x = startX + (c - colNum / 2) * 70;
                var y = startY + 50 + (r - rowNum / 2) * 80;

                //创建shape
                var shape = new SvgMarker.Shape[shapeKeys[r]]({
                    height: 24 * (1 + c * 0.3),
                    strokeWidth: 1,
                    strokeColor: '#ccc',
                    fillColor: colors[idx]
                });

                var labelCenter = shape.getCenter();

                var position = map.pixelToLngLat(new AMap.Pixel(x, y));

                markers.push(new SvgMarker(
                    shape, {
                        map: map,
                        position: position,
                        containerClassNames: 'shape-' + shapeKeys[r],
                        iconLabel: {
                            innerHTML: String.fromCharCode('A'.charCodeAt(0) + c),
                            style: {
                                top: labelCenter[1] - 9 + 'px'
                            }
                        },
                        showPositionPoint: true
                    }));
            }
        }
    });
    </script>
</body>

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