开发 地铁图 JS API 入门指南

入门指南 最后更新时间: 2021年01月22日

入门指南将带您迅速了解地铁图 JS API的基本使用,学习如何以easy模式创建地铁简易图,使您在最短时间内创建一个地铁图页面。

准备页面

在正式开始开发地图应用之前,您需要做如下几步:

申请JS API的开发者Key

申请地址:https://lbs.amap.com/dev/key

引入地铁图 JS API文件

<script type="text/javascript" src="https://webapi.amap.com/subway?v=1.0&amp;key=您申请的key值&amp;callback=cbk"></script>

html文档中的meta声明

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, shrink-to-fit=no"/>

创建地图容器

在页面body里想展示地图的地方创建一个div 容器,并指定id标识:

<div id="mysubway"></div> 

创建简易地铁图

做完简单的准备工作之后,就可以开始创建地图了.

easy模式快速创建地铁图

如果希望快速地通过默认设置来开发地铁图,可以使用easy模式来完成创建,只需要下面的简单一句代码,将我们刚刚创建div的id传给subway的构建函数即可,这个时候API将根据默认生成一个北京的地铁图:

var mysubway = subway("mysubway", {easy: 1});

运行之后就可以看到地铁图了。

完整的HTML代码如下:

<html>
    <head>
        <meta charset="utf-8">
            <!--重要meta, 必须!-->
            <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,shrink-to-fit=no" name="viewport"/>
            <title>
                SUBWAY
            </title>
        </meta>
    </head>
    <body>
        <div id="mysubway">
        </div>
        <script src="https://webapi.amap.com/subway?v=1.0&key=your_key&callback=cbk">
        </script>
        <script type="text/javascript">
            //开启easy模式, 直接完成地铁图基本功能, 无需自己写交互 window.cbk = function(){ var mysubway = subway("mysubway", { easy: 1 }); };
        </script>
    </body>
</html>



返回顶部 示例中心 常见问题 智能客服 公众号
二维码