开发 地铁图 JS API 开发指南 地铁图显示 创建地铁图

创建地铁图 最后更新时间: 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&amp;key=your_key&amp;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();
返回顶部 示例中心 常见问题 智能客服 公众号
二维码