怎么画地铁图 java_创建地铁图-地铁图显示-开发指南-地铁图 JS API | 高德地图API...

本章节将带您迅速了解地铁图 JS API的基本使用，学习如何创建和设置地铁简易图，如何添加点标记、信息窗体，如何绑定事件，如何做路线规划,使您在最短时间内创建一个地铁图页面。

准备页面

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

申请JS API的开发者Key

引入地铁图 JS API文件

html文档中的meta声明

创建地图容器

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

创建简易地铁图

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

easy模式快速创建地铁图

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

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

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

完整的HTML代码如下：

SUBWAY

//开启easy模式, 直接完成地铁图基本功能, 无需自己写交互

window.cbk = function(){

var mysubway = subway("mysubway", {

easy: 1

});

};

自定义模式创建地铁图

如果您想个性化使用地铁图，我们可以根据参数来设置您想要的地铁图：

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();