示例中心
功能在线体验
控制台

高德 开发 地铁图 JS API 开发指南 高阶开发 高阶开发指南

更新时间:2017年03月06日

本章节将为开发者介绍以自定义的方式创建一个完整的地铁图的完整代码,内容涉及到:线路名点击并高亮线路,站点点击,信息窗体展示,设为起点/终点,规划线路。

完整HTML代码如下: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!--重要meta, 必须!-->
    <meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,shrink-to-fit=no" />
    <title>SUBWAY</title>
</head>
<body>
    <div id="mybox"></div>
    <script data-src="http://webapi.amap.com/subway?v=1.0&key=123333&callback=cbk"></script>
    <script type="text/javascript">
    window.cbk = function() {
        var mySubway = subway("mybox", {
            adcode: 1100,
            theme: "colorful",
            client: 0,
            doubleclick: {
                switch: true
            }
        });

        //地铁加载完成,执行complete事件
        mySubway.event.on("subway.complete", function(ev, info) {
            var id = info.id;
        });

        //点击站点,显示此站点的信息窗体
        mySubway.event.on("station.touch", function(ev, info) {
            var id = info.id;
            mySubway.stopAnimation();
            mySubway.addInfoWindow(id, {});
            var center = mySubway.getStCenter(id);
            mySubway.setCenter(center);
        });

        //点击线路名,高亮此线路
        mySubway.event.on("lineName.touch", function(ev, info) {
            mySubway.showLine(info.id);
            var select_obj = qs('#g-select');
            mySubway.setFitView(select_obj);
            var center = mySubway.getSelectedLineCenter();
            mySubway.setCenter(center);
        });

        //点击空白, 关闭infowindow
        mySubway.event.on("subway.touch", function() {
            mySubway.clearInfoWindow();
        });

        //设置起点
        mySubway.event.on("startStation.touch", function(ev, info) {
            mySubway.stopAnimation();
            mySubway.clearInfoWindow();
            mySubway.setStart(info.id, {});
            startInfo = info;
            route();
        });

        //设置终点
        mySubway.event.on("endStation.touch", function(ev, info) {
            mySubway.stopAnimation();
            mySubway.clearInfoWindow();
            mySubway.setEnd(info.id, {});
            endInfo = info;
            route();
        });

        //路线规划
        var startInfo = {},
            endInfo = {};
        function route() {
            if (startInfo.id && endInfo.id) {
                mySubway.route(startInfo.id, endInfo.id, {});
                startInfo = {};
                endInfo = {};
            }
        }
    };
    </script>
</body>
</html>


示例中心 功能
在线体验
常见问题