AI
产品服务
解决方案
文档与支持
定价

所有文档

JSAPI 地铁图

更新时间: 2026/03/11 11:12
简介

对于能够根据站点位置添加到地铁图中的元素我们统称为覆盖物。地铁图中所有的覆盖物都是和站点相关的。当您缩放和拖动地铁图时,覆盖物会相应的跟随站点移动。

DEMO详情
站点标注
信息窗口

提供的覆盖物

地铁图提供的覆盖物如下表。
详情请见类参考

覆盖物类名说明

Marker

表示地铁图上的点,支持自定义图标

信息窗口

InfoWindow

标识地铁图上的信息窗口,支持自定义信息窗口的内容和样式

标注点

Marker通常用来标注地铁图上的某个站点。API提供了默认样式,您也可以通过Icon类来自定义图标。
Marker使用详情请见类参考

1. 向地铁图添加标注

新建一个Marker对象,配置icon为自定义的Icon对象,之后调用Subway.addMarker()方法把Marker添加到地铁图中:

var marker = new BMapSub.Marker('西直门', {icon: startIcon});
subway.addMarker(marker);
2. 自定义标注图标
var startIcon = new BMapSub.Icon(
'[https://api.map.baidu.com/images/subway/start-bak.png https://api.map.baidu.com/images/subway/start-bak.png]',
new BMapSub.Size(50, 80)
);

信息窗口

InfoWindow通常用来标注地铁图上一些复杂信息。InfoWindow的DOM结构和CSS可以完全自定义。

1. 定义InfoWindow对象
var infowindow = new BMapSub.InfoWindow(
'<div id="bd-subwayInfo">'
+ '<div id="bd-subwayTitle">'
+ '西直门'
+ '</div>'
+ '</div>'
);
2. 向地铁图添加信息窗口

使用Subway.openInfoWindow()方法,把信息窗口添加到地铁图中。其中,第一个参数为InfoWindow对象,第二个参数为要添加信息窗口的站点。

subway.openInfoWindow(infowindow, '西直门');

上一篇

添加控件

下一篇

事件处理

本篇文章对您是否有帮助?