高德地图开发地铁图 JS API—概述

高德地图开发地铁图 JS API—概述

概述 最后更新时间: 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开发指南来进行快速学习,并且有丰富的线下活动等你来参加。