subway

地铁图展示

我们从展示一个北京的地铁图开始。以下为Demo和示例。

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%}
    </style>
</head>
<body></body>
</html>

2引入百度地图API文件

<script type="text/javascript" src="https://api.map.baidu.com/api?type=subway&v=1.0&ak=您的密钥"></script>

3初始化地图逻辑

创建地铁图实例，之后用一个subwayCityName和缩放级别来初始化地图。

<script type="text/javascript">
/**
* 从所有城市列表中获取北京信息
* 结果格式
* {
* keyword: 'beijing',
* name: '北京',
* citycode: '131'
* }
*/
/* globals BMapSub */
var subwayCityName = '北京';
var list = BMapSub.SubwayCitiesList;
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.5);
</script>

至此，我们完成了一个更加完整的地图展示的例子。

文档全面上新