水滴

使用SvgMarker实现水滴状的图标效果。

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

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/overlay/SvgMarker/examples/index.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');
        }

        //创建一个水滴状的shape
        var shape = new SvgMarker.Shape.WaterDrop({
            height: 60, //高度
            //width: **, //不指定,维持默认的宽高比
            fillColor: 'orange' //填充色
                //strokeWidth: 1, //描边宽度
                //strokeColor: '#666' //描边颜色
        });

        //利用该shape构建SvgMarker
        new SvgMarker(shape, {
            zIndex: 120,
            map: map,
            position: map.getCenter(),
            showPositionPoint: true
        });


        //另外一个SvgMarker
        new SvgMarker(new SvgMarker.Shape.WaterDrop({
            height: 100, //高度
            fillColor: 'purple'
        }), {
            zIndex: 110,
            map: map,
            position: map.getCenter(),
            showPositionPoint: true
        });

    });
    </script>
</body>

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