简单数据附加

给PathSimplifier路径的节点附加数据，并展示。

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

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/misc/PathSimplifier/examples/simple-data.html -->
    <base href="//webapi.amap.com/ui/1.1/ui/misc/PathSimplifier/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(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {

        if (!PathSimplifier.supportCanvas) {
            alert('当前环境不支持 Canvas！');
            return;
        }

        var pathSimplifierIns = new PathSimplifier({
            zIndex: 100,
            //autoSetFitView:false,
            map: map, //所属的地图实例

            getPath: function(pathData, pathIndex) {

                var points = pathData.points,
                    lnglatList = [];

                for (var i = 0, len = points.length; i < len; i++) {
                    lnglatList.push(points[i].lnglat);
                }

                return lnglatList;
            },
            getHoverTitle: function(pathData, pathIndex, pointIndex) {

                if (pointIndex >= 0) {
                    //point 
                    return pathData.name + '，' + pathData.points[pointIndex].name;
                }

                return pathData.name + '，点数量' + pathData.points.length;
            },
            renderOptions: {

                renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
            }
        });

        window.pathSimplifierIns = pathSimplifierIns;

        //设置数据
        pathSimplifierIns.setData([{
            name: '路线0',
            points: [{
                name: "点a",
                lnglat: [116.405289, 39.904987]
            }, {
                name: "点b",
                lnglat: [113.964458, 40.54664]
            }, {
                name: "点c",
                lnglat: [111.47836, 41.135964]
            }, {
                name: "点d",
                lnglat: [108.949297, 41.670904]
            }, {
                name: "点e",
                lnglat: [106.380111, 42.149509]
            }, {
                name: "点f",
                lnglat: [103.774185, 42.56996]
            }, {
                name: "点g",
                lnglat: [101.135432, 42.930601]
            }, {
                name: "点h",
                lnglat: [98.46826, 43.229964]
            }, {
                name: "点i",
                lnglat: [95.777529, 43.466798]
            }, {
                name: "点j",
                lnglat: [93.068486, 43.64009]
            }, {
                name: "点k",
                lnglat: [90.34669, 43.749086]
            }, {
                name: "点l",
                lnglat: [87.61792, 43.793308]
            }]
        }]);

        //选中路线0
        pathSimplifierIns.setSelectedPathIndex(0);

        pathSimplifierIns.on('pointClick', function(e, info) {

            console.log('Click: ' + info.pathData.points[info.pointIndex].name);
        });
    });
    </script>
</body>

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