创建地铁图 最后更新时间: 2021年09月28日
本章节将带您迅速了解地铁图 JS API的基本使用，学习如何创建和设置地铁简易图，如何添加点标记、信息窗体，如何绑定事件，如何做路线规划,使您在最短时间内创建一个地铁图页面。
准备页面
在正式开始开发地图应用之前,您需要做如下几步:
申请JS API的开发者Key
申请地址：https://lbs.amap.com/dev/key
引入地铁图 JS API文件
<script type="text/javascript" src="https://webapi.amap.com/subway?v=1.0&key=您申请的key值&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 name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,shrink-to-fit=no"/>
<title>SUBWAY</title>
</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>自定义模式创建地铁图
如果您想个性化使用地铁图，我们可以根据参数来设置您想要的地铁图：
var mysubway = subway("mysubway");或者您想生成其他城市的地铁图，您可以传入这个城市的城市编码adcode：
var mysubway = subway("mysubway", {
adcode: 3100 //上海的adcode
});参数说明
参数名 | 参数值 |
|---|---|
adcode | 支持城市代码，例如3100，代表上海; 如果您希望获取所有城市的代码，您可以调用getCityList(callback)方法来获取 |
获取城市列表
您可以通过调用 getCityList(callback)方法来获取当前中国已经开通地铁的城市列表
参数说明
参数名 | 参数说明 |
|---|---|
callback | 返回城市列表数据之后的回调函数 |
需要特别注意的subway.complete事件
subway.complete事件表示地铁图加载完成，地铁图实例方法（如：addInfoWindow,route等方法）需要在此事件完成后调用。
mysubway.event.on("subway.complete", function () {
//您的代码...
});
添加点标记
创建好地图之后，我们就可以在地图上添加点标记了，用来标注需要关注的站点，这里使用addmarker方法。
点标记的添加
因为点标记是在站点上标注的，所以添加标注最基本的信息就是站点id或站点名称，我们还可以通过设置属性来设定需要添加marker的样式等。
mysubway.addMarker('南锣鼓巷',{});
点标记的移除
移除标记使用clearMarker方法，传入要移除点的id或站点名称。
添加信息窗体
我们可以通过信息窗体infowindow来展示站点的信息以及在窗体中做一些交互操作。
信息窗体的创建
信息窗体一样可以在创建的时候设定内容等属性，但是infowindow目前仅可以创建一个实例，需要传入相应站点的id或站点名称。
mysubway.addInfoWindow('南锣鼓巷');
信息窗体的移除
因为infowindow只有一个实例，所以移除infowindow只需要调用clearInfoWindow方法即可，不需要传入id。
mysubway.clearInfoWindow();路线规划
我们可以通过设置起点和终点来得到一条最优的地铁规划换成线路，所以最基本的我们需要起点和终点的id或者名称。
规划路线的线路展示
需要传递起点或终点信息才能完成route方法。
var start = '北土城',
end = '天安门西';
mysubway.route(start, end);规划线路的起终点添加
规划线路的展示以及起点和终点的展示才是较为完整的规划结果。 您除了可以通过addMarker来自定义添加起点或者终点，可以快捷的使用setStart和setEnd方法来实现。
mysubway.setStart(start);
mysubway.setEnd(end);
清除路线规划
有了规划结果，您可以通过调用clearRoute方法来清楚线路结果。
mysubway.clearRoute();