百度地图-地铁图调起

最新推荐文章于 2021-03-28 13:21:08 发布

tom_gy_

最新推荐文章于 2021-03-28 13:21:08 发布

阅读量1.7k

点赞数 1

分类专栏：百度地图WEB服务文章标签： javascript

本文链接：https://blog.csdn.net/tom_gy_/article/details/103828730

版权

百度地图WEB服务专栏收录该内容

6 篇文章 2 订阅

订阅专栏

百度地图-地铁图调起

地铁是现在人们出行的重要方式，关于地铁软件的开发也是很热门，但对于地铁图的绘制，对于许多开发者是一件很困难的事，但百度地图提供的地铁接口可以很好的帮助解决这个问题。
调起地铁图的方式很简单只需要执行以下步骤：
1.引入百度地图提供的地铁接口

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

如果没有ak通过以下链接进行申请：http://lbsyun.baidu.com/apiconsole/key/create
2.新建一个div以存放生成的地铁图

<div id="container"></div>

3.使用js对地铁图进行生成

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

此处首先需要设置要显示地铁图的城市，样例中为“北京”，然后需在所有有地图城市中进行循环判断若找到则获取到地铁图对象，否则获取null值，最后将获取到对象放到指定显示区域即可对地铁图进行调起。
样例全部代码：

<!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>
<script type="text/javascript" src="https://api.map.baidu.com/api?type=subway&v=1.0&ak=你的ak"></script>
<style type="text/css">
    #container{height:100%}
</style>
</head>
<body>
<div id="container"></div>
<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>
</body>
</html>

生成地铁图如下：
在这里插入图片描述
如要添加对地图的缩放功能则加入以下代码即可：

    var zoomControl  = new BMapSub.ZoomControl({
        anchor: BMAPSUB_ANCHOR_BOTTOM_RIGHT,
        offset: new BMapSub.Size(10,100)
    });
    subway.addControl(zoomControl);

以上为笔者本人对百度地图-地铁图调起的一些使用理解，希望对读者有帮助。
更多有关百度地图-地铁图调起使用详情可查看官方服务文档：http://lbsyun.baidu.com/index.php?title=subway
相关百度地图方面博文后面会持续更新，欢迎大家支持！

tom_gy_

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
百度地图-地铁图调起

百度地图-地铁图调起地铁是现在人们出行的重要方式，关于地铁软件的开发也是很热门，但对于地铁图的绘制，对于许多开发者是一件很困难的事，但百度地图提供的地铁接口可以很好的帮助解决这个问题。调起地铁图的方式很简单只需要执行以下步骤：1.引入百度地图提供的地铁接口<script type="text/javascript" src="https://api.map.baidu.com/api...
复制链接

扫一扫