地图 JS API 2.0
开发 地图 JS API 2.0 进阶教程 服务插件和工具 站点查询与公交线路

站点查询与公交线路 最后更新时间: 2024年01月08日

本文介绍 JS API 提供的相关公交查询服务,包括:

  1. 公交站点查询插件AMap.StationSearch:通过站点名称关键字查询相关公交站点信息
  2. 公交线路查询插件AMap.LineSearch:通过公交线路名称查询该线路的信息

公交路线规划前往 路线规划教程

1、公交站点查询

[フレーム]

1.1 获取公交站点信息

使用公交站点查询插件AMap.StationSearch,通过关键字ID查询,获得公交站点名称、位置、ID、途径公交线路等详细信息。

以查询"东直门"公交站点为例,一次完整的代码示例:

AMap.plugin(["AMap.StationSearch"], function () {
 //实例化公交站点查询插件
 var station = new AMap.StationSearch({
 pageIndex: 1, //页码,默认值为1
 pageSize: 20, //单页显示结果条数,默认值为20,最大值为50
 city: "010", //限定查询城市,可以是城市名(中文/中文全拼)、城市编码
 });
 //执行关键字查询
 station.search("东直门", function (status, result) {
 //status:complete 表示查询成功,no_data 为查询无结果,error 代表查询错误
 //查询成功时,result.stationInfo 即为公交站点详细信息
 });
});

1.2 绘制公交站点标记

使用AMap.StationSearch插件获取公交站点信息后,可以根据得到的公交站点信息在地图上绘制公交站点标记。这里以查询"东直门"关键字举例,主要包含以下三个步骤:

  1. 创建AMap.StationSearch对象
  2. 搜索"东直门"关键字,获取站点信息
  3. 将站点信息用AMap.Marker绘制到地图上
AMap.plugin(["AMap.StationSearch"], function () {
 //实例化公交站点查询插件
 var station = new AMap.StationSearch({
 city: "010", //限定查询城市,可以是城市名(中文/中文全拼)、城市编码
 });
 //执行关键字查询
 station.search("东直门", function (status, result) {
 //status:complete 表示查询成功,no_data 为查询无结果,error 代表查询错误
 if (status === "complete" && result.info === "OK") {
 var stationArr = result.stationInfo; //查询成功时,result.stationInfo 即为公交站点详细信息
 for (var i = 0; i < stationArr.length; i++) {
 //绘制点标记 Marker
 var marker = new AMap.Marker({
 //点标记中显示的图标
 icon: new AMap.Icon({
 image: "//a.amap.com/jsapi_demos/static/resource/img/pin.png",
 size: new AMap.Size(32, 32),
 imageSize: new AMap.Size(32, 32),
 }),
 offset: new AMap.Pixel(-16, -32), //点标记显示位置偏移量
 position: stationArr[i].location, //点标记在地图上显示的位置
 map: map, //显示该覆盖物的地图对象
 });
 //构造 marker 的信息窗体
 marker.info = new AMap.InfoWindow({
 content: stationArr[i].name, //信息窗体的显示内容
 offset: new AMap.Pixel(0, -30),
 });
 //鼠标悬停时显示该 marker 的信息窗体
 marker.on("mouseover", function (e) {
 e.target.info.open(map, e.target.getPosition());
 });
 }
 }
 //将覆盖物调整到合适视野
 map.setFitView();
 });
});

2、公交路线查询

[フレーム]

2.1 获取公交线路信息

通过公交线路查询插件AMap.LineSearch可获得该公交线路起终点、途经点、首末班车时间等详细信息。

以查询"919"公交路线为例,一次完整的代码示例:

AMap.plugin(["AMap.LineSearch"], function () {
 //实例化公交线路查询插件
 var linesearch = new AMap.LineSearch({
 pageIndex: 1, //页码,默认值为1
 pageSize: 20, //单页显示结果条数,默认值为20,最大值为50
 city: "北京", //限定查询城市,可以是城市名(中文/中文全拼)、城市编码
 extensions: "all", //是否返回公交线路详细信息,默认值为 "base"
 });
 //执行公交路线关键字查询
 linesearch.search("919", function (status, result) {
 console.log(status, result);
 //status:complete 表示查询成功,no_data 为查询无结果,error 代表查询错误
 //查询成功时,result.lineInfo 即为公交线路详细信息
 });
});

2.2 绘制公交路线

使用AMap.LineSearch插件获取公交线路信息后,可以根据得到的公交线路信息在地图上绘制对应的公交线路。这里以查询"919"公交路线举例,主要包含以下三个步骤:

  1. 创建AMap.LineSearch对象
  2. 搜索"919"公交路线信息,获取线路信息
  3. 将路线信息绘制到地图上
AMap.plugin(["AMap.LineSearch"], function () {
 //实例化公交线路查询插件
 var linesearch = new AMap.LineSearch({
 city: "北京", //限定查询城市,可以是城市名(中文/中文全拼)、城市编码
 extensions: "all", //是否返回公交线路详细信息,默认值为 "base"
 });
 //执行公交路线关键字查询
 linesearch.search("919", function (status, result) {
 //status:complete 表示查询成功,no_data 为查询无结果,error 代表查询错误
 if (status === "complete" && result.info === "OK") {
 //查询成功时,result.lineInfo 即为公交线路详细信息
 var lineArr = result.lineInfo;
 //循环遍历 lineArr 数组,lineArr 数组包含的是公交线路数据
 for (var i = 0; i < lineArr.length; i++) {
 var pathArr = lineArr[i].path; //获取当前线路的路径坐标数据
 var stops = lineArr[i].via_stops; //获取当前线路途径的站点数据
 var startPot = stops[0].location; //获取当前线路的起始位置
 var endPot = stops[stops.length - 1].location; //获取当前线路的终点位置
 //作为示例,只绘制一条线路,如果当前是第一条线路(i == 0)
 if (i == 0) {
 //绘制起点,终点
 new AMap.Marker({
 map: map, //指定地图对象
 position: startPot, //起点位置
 icon: "https://webapi.amap.com/theme/v1.3/markers/n/start.png",
 zIndex: 10, //起点标记的 z-index 值,用于控制层次关系
 anchor: "bottom-center", //起点标记的锚点位置
 });
 new AMap.Marker({
 map: map,
 position: endPot, //终点位置
 icon: "https://webapi.amap.com/theme/v1.3/markers/n/end.png",
 zIndex: 10,
 anchor: "bottom-center",
 });
 //绘制乘车的路线
 new AMap.Polyline({
 map: map,
 path: pathArr, //路径坐标数据
 strokeColor: "#09f", //线颜色
 strokeOpacity: 0.8, //线透明度
 isOutline: true, //显示轮廓线
 outlineColor: "white", //轮廓线颜色
 strokeWeight: 6, //线宽
 });
 }
 }
 //将覆盖物调整到合适视野
 map.setFitView();
 }
 });
});

3、本章涉及的属性及方法说明

3.1 AMap.StationSearch

参数/方法

说明

类型

参数值描述

默认值

pageIndex

页码

Number

1 - 100

1

pageSize

单页显示结果条数

Number

1 - 100

20

city

公交站点所在城市

String

cityname(中文或中文全拼)、citycode、adcode

-

station.search()

关键词查询的方法

Function

-

-

3.2 AMap.LineSearch

参数/方法

说明

类型

参数值描述

默认值

pageIndex

页码

Number

1 - 100

1

pageSize

单页显示结果条数

Number

1 - 100

20

city

公交站点所在城市

String

cityname(中文或中文全拼)、citycode、adcode

-

extensions

仅公交路线查询时有效

String

'base'返回公交路线基本信息

'all'返回公交路线基本信息+详细信息

'base'

linesearch.search()

关键词查询的方法

Function

-

-

3.3 AMap.Marker

参数/方法

说明

类型

参数值描述

icon

在点标记中显示的图标

String

前往 自定义点标记

offset

点标记显示位置偏移量

Pixel

前往 点标记锚点位置

position

点标记在地图上显示的位置

经纬度对象或经纬度构成的一维数组

例如:

AMap.LngLat(116.39,39.9) |

[116.39, 39.9]

map

显示覆盖物的地图对象

AMap.Map

-

zIndex

点标记的叠加顺序

Number

12

anchor

设置点标记锚点位置

String

前往 点标记锚点位置

3.4 AMap.Polyline

参数/方法

说明

类型

参数值描述

默认值

map

显示覆盖物的地图对象

AMap.Map

-

-

path

路径

Array

-

-

strokeColor

线条颜色

String

使用16进制颜色代码赋值

'#00D3FC'

strokeOpacity

轮廓线透明度

Number

取值范围 [0,1]

0表示完全透明

1表示不透明

0.5

isOutline

是否显示描边

Boolean

true | false

false

outlineColor

线条描边颜色

String

此项仅在isOutlinetrue时有效

'#00B2D5'

strokeWeight

轮廓线宽度

Number

-

2

示例中心 常见问题

AltStyle によって変換されたページ (->オリジナル) /