地铁站导航机上的自助导航功能是如何实现的？百度地图一次性为你全面揭秘！
目录
前言
在城市的脉络中，地铁如同一条条穿梭的巨龙，承载着无数人的出行梦想。然而，面对错综复杂的地铁线路和庞大的站点布局，即使是经验丰富的乘客，也难免会迷失方向。幸运的是，随着科技的飞速发展，地铁站导航机上的自助导航功能应运而生，它如同一位智慧的向导，为乘客们照亮前行的道路。地铁站导航机的自助导航功能，是现代科技与交通出行完美融合的结晶。它不仅极大地提升了乘客的出行效率，还为地铁运营的智能化管理提供了有力支持。但你是否曾好奇，这看似简单的导航功能背后，究竟隐藏着怎样的技术奥秘？它是如何将那么多的地铁线路集成到一起，又是如何在复杂的地铁网络中规划出最优的出行路径呢？
百度地图，作为国内领先的地图服务提供商，一直致力于为用户提供精准、便捷的导航体验。今天，百度地图将带你走进地铁站导航机的自助导航世界，一次性为你揭开它的神秘面纱。用户交互的友好设计，我们将全方位、多层次地剖析这一功能的实现原理。本文以长沙市为例，在接下来的内容中，你将了解到如何使用百度地图的地铁JS来构建城市地铁自助查询展示，实现精准信息查询的。同时，我们将深入介绍百度地图的地铁JS API。无论你是科技爱好者，还是对地铁出行有着浓厚兴趣的普通乘客，这篇文章都将为你带来全新的视角和深刻的理解。让我们一起跟随百度地图的脚步，探索地铁站导航机自助导航功能背后的科技魅力，开启一段智慧出行的奇妙之旅。
一、地铁图JS API介绍
本节将重点介绍百度地图的地铁图JSAPI，主要包括其具体的功能，其次是介绍如何在百度地图中开启地铁图基础设置。
1、地铁图JS API能做什么
相信大家在平时的出行中，在地铁站中一定见过很多自助查询的机器，机器上不仅有导航的功能，还有收票的功能。如下图所示：
上图中的地图与GIS的地图还是有一些差别的，这种是基于SVG的地图展示方式。那么这种地图又是怎么生成的呢？谈到地铁图JS API就不得不提百度的地铁图JS API。下面是百度地图的地铁API的说明。其中有一些注意事项需要大家注意。
百度地铁图JavaScript API（简称地铁图JS API）是一套由JavaScritp语言编写的应用程序接口。能够帮助您在移动端浏览器或移动Web App上构建地铁图。地铁图JS API 免费对外开放，接口使用无次数限制。在使用前，您需先申请密钥（AK）才可使用。在您使用百度地铁图JS API之前，请先阅读百度地图API使用条款。任何非营利性应用请直接使用，商业应用请参考使用须知。
2、如何开启基础设置
与其他的地图API相似，地铁图JS API同样也是需要进行AK申请的，而且需要进行权限授权。我们打开控制台，如下图所示：
我们可以创建新的应用，也可是在原来申请的浏览器端API进行修改，需要注意的是，这里我们选择的应用类型必须要为“浏览器端”，不要使用服务端类型，否则服务可能不能正常调用。
完成后点击“提交”按钮即可。完成以上设置之后，接下来我们就可以来进行相应地铁图的生成实践了。
二、长沙地铁图生成实践
本节将以长沙为例，详细讲解如何基于百度地图的地铁图JS API来实现展示以及实现地铁图的缩放处理。通过详细的实现步骤大家对整体的实现有一个大致的了解。
1、创建网页框架
首先我们创建一个Html网页的基本框架，包含基本的定义等，核心代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>百度地铁图展示</title>
<style type="text/css">
#container{height:100%}
.center-flex {
z-index : 401;
position: fixed;
color: #f5f5f5;
left: 50%;
font-size:30px;
font-family:楷体;
transform: translate(-50%, 6%);
background-color:#ff005e9e;
}
</style>
</head>
<body>
<div class="center-flex">
长沙地铁地图展示
</div>
<div id="container"></div>
</body>
</html>
这里仅仅展示一个标准的div容器对象，并且在div的上方展示当前的城市信息，设置了展示的颜色、字体大小、背景颜色等基本信息。
2、使用AK引入地铁图API
然后在网页中引入百度地图的地铁图API，需要注意的是在需要引用的js中，需要复制前面的AK值，当成验证的标识，否则验证失败。携带AK的JS引入代码如下：
<script type="text/javascript" src="http://api.map.baidu.com/api?type=subway&v=1.0&ak=youak"></script>
3、城市地铁初始化
使用上述的代码引入百度的地铁图JS API之后，接下里我们就可以进行城市地铁的初始化展示了。在进行地铁路线展示时，首先需要确定开通地铁的城市列表信息，然后通过这个城市信息来进行数据的初始化，在百度的JS API中，专门有一个对象是用来获取开通地铁的方法的，具体开通的城市列表这里暂且不做说明，后续再来做详细阐述。首先我们来说明如何开通目标城市的地铁路线信息，代码如下：
<script type="text/javascript">
var subwayCityName = '长沙';
var list = BMapSub.SubwayCitiesList;
console.log(list.length);
/** 打印开通地铁的城市信息 begin */
for (var i = 0; i < list.length; i++) {
console.log(list[i]);
}
/** 打印开通地铁的城市信息 end */
var subwaycity = null;
for (var i = 0; i < list.length; i++) {
if (list[i].name === subwayCityName) {
subwaycity = list[i];
break;
}
}
// 获取长沙地铁数据-初始化地铁图
var subway = new BMapSub.Subway('container', subwaycity.citycode);
subway.setZoom(0.45);
var zoomControl = new BMapSub.ZoomControl({
anchor: BMAPSUB_ANCHOR_BOTTOM_RIGHT,
offset: new BMapSub.Size(10,100)
});
subway.addControl(zoomControl);
</script>
在上述的代码中，我们将开通地铁的城市都打印了出来，下面一起来看看具体有多少个城市，如下图所示：
一共有79个城市开通了地铁信息。最后也来看一下我们做出来的真实效果如下图所示：
三、基础API简介
为了让大家对百度地铁图的JS API有一个简单的了解，下面我们将简单对地铁图的涉及的核心和基础类API进行简单介绍，其它更多的内容在后续的博文中深入讲解。
1、核心类介绍
核心类包含Subway和SubwayCity。其中Subway是地铁图API的核心类，用来实例化一个地铁图。
| 构造函数 | 描述 |
| Subway(container: String, citycode: String) | 在指定的DOM容器中创建地铁图实例，地铁图城市通过citycode决定， 如果未指定citycode如果当前城市不支持地铁图，默认显示北京市地铁图 |
| 方法 | 返回值 | 描述 |
| setCity(citycode: String) | none | 设置地铁图城市，如果当前城市不支持地铁图。 默认显示北京市地铁图 |
| getCurrentCity() | SubwayCity | 获取当前地铁图的城市citycode |
| setCenter(station: String | Station) | Boolean | 设置某地铁站为当前地铁图显示的的中心，如"北京西站"， 该地铁站必须属于当前城市。如果设置成功返回true，失败返回false |
| setZoom(zoom: Number) | none | 设置地铁图缩放级别，zoom的可选范围为0.1到2之前，可以是小数 |
| getZoom() | Number | 返回当前地铁图缩放级别 |
| zoomIn() | none | 放大地铁图缩放级别 |
| zoomOut() | none | 缩小地铁图缩放级别 |
| addMarker(marker: Marker) | none | 在地铁图上添加Marker覆盖物 |
| removeMarker(marker: Marker) | none | 移除地铁图上的指定Marker覆盖物 |
| clearMarkers() | none | 清除地铁图上的所有Maker覆盖物 |
| openInfoWindow(infoWindow: InfoWindow, station: Station) | none | 在地铁图上指定的station添加infoWindow覆盖物 |
| closeInfoWindow() | none | 移除地铁图上infoWindow覆盖物 |
| clearOverlays() | none | 移除地铁图上所有类型的覆盖物 |
| getStation(station: String) | Station | 获取当前地铁图中某个地铁站的对象 |
| addControl(control: Control) | none | 在地铁图中添加控件 |
| removeControl(control: Control) | none | 删除控件 |
| getLines() | Array< Line> | 获取当前地铁图城市的所有地铁线路 |
| 事件 | 参数 | 描述 |
| subwayloaded | none | 地铁图绘制完成后触发此事件 |
| tap | event{station} | 点击地铁图上某一地铁站后触发此事件 |
| directioncomplete | event{totalTime, totalStops, lines} | 线路规划面板，点击详情按钮后触发 |
SubwayCity表示有地铁的城市对象，可直接通过BMapSub.SubwayCitiesList获得由SubwayCity组成的Array
| 属性 | 类型 | 描述 |
| keyword | String | 城市的汉语拼音 |
| name | String | 城市中文名 |
| cityCode | String | 城市的cityCode，可用作初始化地铁 |
2、核心类数据获取
在核心类中，对于SubwayCIty的我们使用下面的方法进行获取和数据的打印：
/** 打印开通地铁的城市信息 begin */
for (var i = 0; i < list.length; i++) {
console.log(list[i]);
}
/** 打印开通地铁的城市信息 end */
在控制台中展示SubwayCity的数据实例如下：
前面的城市是中国的，仔细往后面翻阅，可以看到有一些事国外的地铁站信息，如下图所示：
四、总结
以上就是本文的主要内容，本文以长沙市为例，在接下来的内容中，你将了解到如何使用百度地图的地铁JS来构建城市地铁自助查询展示，实现精准信息查询的。同时，我们将深入介绍百度地图的地铁JS API。无论你是科技爱好者，还是对地铁出行有着浓厚兴趣的普通乘客，这篇文章都将为你带来全新的视角和深刻的理解。让我们一起跟随百度地图的脚步，探索地铁站导航机自助导航功能背后的科技魅力，开启一段智慧出行的奇妙之旅。本文通过实例的讲解，一步一步的对地铁图API进行介绍，又详细的介绍了地铁图的生成实践，后面也深入详细的介绍了基础API的相关知识。行文仓促，定有不足之处，欢迎各位朋友在评论区批评指正，不胜感激。
- 点赞
- 收藏
- 关注作者
评论（0）