自定义路径

使用SvgMarker自定义路径。

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

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/overlay/SvgMarker/examples/custom-path.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.load(['lib/utils', 'ui/overlay/SvgMarker'], function(utils, SvgMarker) {

        if (!SvgMarker.supportSvg) {
            alert('当前环境不支持SVG');
        }

        function MyCustomPathShape(opts) {

            opts = utils.extend({
                //定义原始路径
                sourcePath: {
                    //路径， 这里是一个简单的沙漏形状
                    path: 'M0 0 L 10 0 L 0 10 L 10 10 z',
                    //原始宽度
                    width: 10,
                    //原始高度
                    height: 10
                }
            }, opts);

            MyCustomPathShape.__super__.constructor.call(this, opts);
        }

        //继承PathShape
        utils.inherit(MyCustomPathShape, SvgMarker.Shape.PathShape);

        //覆写部分方法
        utils.extend(MyCustomPathShape.prototype, {
            //针对定位基点的偏移，比如当前path的定位点在中心位置
            getOffset: function() {
                return [-this.getWidth() / 2, -this.getHeight() / 2];
            },
            //图形的视觉中心点，该位置有助于获取合适的文字位置
            getCenter: function() {
                return [this.getWidth() / 2, this.getHeight() / 2];
            }
        });

        var shape = new MyCustomPathShape({
                width: 60,
                strokeWidth: 2,
                strokeColor: 'blue',
                fillColor: 'green'
            }),
            shapeCenter = shape.getCenter();

        var marker = new SvgMarker(

            shape, {
                iconLabel: {
                    innerHTML: 'A',
                    //自定义文字样式
                    style: {
                        fontSize: '20px',
                        top: shapeCenter[1] - 12 + 'px',
                        left: shapeCenter[0] + 10 + 'px',
                        right: 'auto',
                        color: 'red'
                    }
                },
                map: map,
                position: map.getCenter(),
                showPositionPoint: true
            });

    });
    </script>
</body>

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