概述最后更新时间: 2021年10月27日

高德开放平台地铁图 JS API是一套简单易用的移动端地铁线路图开发接口，用户可以通过该API开发出具有地铁线路展示、路线查询、站点标注以及路线规划功能的地铁图移动端H5页面。

目前地铁图 JS API为Beta版本，我们会逐步完善该产品，也希望开发者们能够持续关注本产品的进展。

功能介绍与体验

模式更换

请扫描二维码在手机端体验更多功能

请扫描二维码在手机端体验更多功能

请扫描二维码在手机端体验更多功能

请扫描二维码在手机端体验更多功能

请扫描二维码在手机端体验更多功能

请扫描二维码在手机端体验更多功能

快速入门

var mysubway = subway("mysubway",{
    adcode: "1100"
});

mysubway.event.on("subway.complete", function () {
    mysubway.addInfoWindow("南锣鼓巷");
    var center = mysubway.getStCenter("南锣鼓巷");

    mysubway.setCenter(center);
});

站点标注

var mysubway = subway("mysubway",{
    adcode: "1100"
});

mysubway.event.on("subway.complete", function () {
    var mymarker1 = mysubway.addMarker("南锣鼓巷", {});

    var mymarker2 = mysubway.addMarker("北海北", {
        width: 19,
        height: 33,
        offset: {
            x: 0,
            y: 0
        },
        cnt: "<div><img src="https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png"></div>"
    });
});

自定义信息窗体

<style type="text/css">
        .tip_out{
            position: relative;
        }
        .tip{
            position: absolute;

            width: 120px;
            left: -60px;
            bottom: 0;
        }
        .tip_name{
            background: rgba(0,0,0,0.7);
            padding:10px 0;
            text-align: center;
            font-size: 12px;
            color: #fff;
            border-radius: 4px;
        }
        .tip .tip_start, .tip .tip_end{
            float: left;
        }
        .tip_footer{
                height: 10px;
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAALCAYAAACUPhZAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAG5JREFUeNpiNDY2FmNgYJgDxFIM1AOvgDidCcpIAeJn1DQYiB8zIQlQwwK4wSAOE5oEJRagGIxuOCUWYBiMzXByLMBqMC7DSbEAp8H4DCfGArwGEzIcnwUEDSbGcGwWEGUwsYYjW3CBWINBACDAACkeLdxbVjieAAAAAElFTkSuQmCC) center top no-repeat;
                background-size: 21px 10px;
        }
</style>

var mysubway = subway("mysubway", {
    adcode: "1100"
});

mysubway.event.on("subway.complete", function () {
    mysubway.addInfoWindow("南锣鼓巷",{
        isCustom: true,
        content: "<div class="tip_out"><div class="tip"><div class="tip_name">南锣古巷</div><div class="tip_footer"></div></div>"
    });
});

自定义特殊站点

<style type="text/css">
    .custom_circle{
        width: 30px;
        height: 30px;
        fill: rgb(0, 122, 255);
        fill-opacity: 0.4;
        stroke-width: 0;
    }
</style>

var mysubway = subway("mysubway",{
    adcode: "1100"
});

mysubway.event.on("subway.complete", function () {
    var detailOpts = {
        type: "circle",
        r: 14,
        customClass: "custom_circle"
    };

    mysubway.addCustomNode("南锣鼓巷", detailOpts);
});

筛选线路

var mysubway = subway("mysubway",{
    adcode: "1100"
});

mysubway.event.on("subway.complete", function () {

    // var id = mysubway.getIdByName("8号线", "line");
    mysubway.showLine("8号线");

    var $select_obj = document.getElementById("g-select");
    // mysubway.setFitView($select_obj);
    var center = mysubway.getSelectedLineCenter();
    mysubway.setCenter(center);

});

路线规划

var mysubway = subway("mysubway",{
    adcode: "1100000"
});
mysubway.event.on("subway.complete", function () {

    var start = "北土城",
        end = "天安门西";

    mysubway.setStart(start);
    mysubway.setEnd(end);

    mysubway.route(start, end, {
        closeBtn: true
    });
});

账号与Key的申请

注册成为高德开发者需要分三步：

第一步，注册高德开发者；

第二步，去控制台创建应用；

第三步，获取Key。

具体步骤可参看下图

获取 API Key

给开发者的建议

（1）对于高德开放平台提供的地图API/SDK，若您以非商业目的使用，则均可免费使用。若您以商业目的使用，则您需事先从高德获取商用授权。您需要先申请Key，才能使用该服务。关于具体使用规则，请参阅《高德地图开放平台服务协议》获得详细信息。

（2）您可以通过地铁图 JS API开发指南来进行快速学习，并且有丰富的线下活动等你来参加。

概述 最后更新时间: 2021年10月27日

功能介绍与体验

账号与Key的申请

给开发者的建议

概述最后更新时间: 2021年10月27日