自定义形状

使用SvgMarker自定义形状。

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

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/overlay/SvgMarker/examples/custom-shape.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 MyCustomShape(opts) {

            opts = utils.extend({
                width: 100,
                height: 100,
                strokeWidth: 10,
                strokeColor: 'red'
            }, opts);

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

        //继承BaseShape
        utils.inherit(MyCustomShape, SvgMarker.Shape.BaseShape);

        //覆写部分方法
        utils.extend(MyCustomShape.prototype, {

            //返回svg的内部构造，
            getInnerHTML: function(params) {

                var p1 = '0,0',
                    p2 = '0,' + params.height,
                    p3 = params.width + ',' + params.height / 2;

                // 一个指向右侧的三角形
                return '<polygon points="' + [p1, p2, p3].join(' ') + '" ' +
                    this.buildAttrStr(params, ['fill']) + '></polygon>';
            },
            getOffset: function() {
                //定位点在右侧中部位置，左上角的偏移:
                return [-this.getWidth(), -this.getHeight() / 2];
            }
        });

        var shape = new MyCustomShape({
            width: 100,
            height: 50,
            fill: 'green'
        });

        var marker = new SvgMarker(shape, {
            map: map,
            position: map.getCenter(),
            showPositionPoint: true
        });
    });
    </script>
</body>

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