浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。

文档全面上新

更科技的视觉体验,更高效的页面结构,快前往体验吧!

体验新版
地铁图展示
我们从展示一个北京的地铁图开始。以下为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>
至此,我们完成了一个更加完整的地图展示的例子。
  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误,或对此文档有更好的建议,请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消