没有match的答案？试试对话大模型
| 第1行： | 第1行： | ||
{{subway-sidebar}} | {{subway-sidebar}} | ||
| − | <div class="bluetitle"><div class=" | + | <div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>地铁图展示</span></div></div></div><div class="serve-explain-text">我们从展示一个北京的地铁图开始。以下为Demo和示例。<br/></div><div class="aloneDemo"><div dir="https://lbsyun.baidu.com/cms/jsapi/demo/jsapiSubway/subway0_0.html"></div><div class="top_right">[http://lbsyun.baidu.com/jsdemo.htm#subway0_0 DEMO详情]</div></div><div class="devguide"><div class="leftborderbg" style="height:5000px;"></div><div class="devguideorder"><span>1</span>编写HTML页面的基础代码</div><div class="devguidecenter">在这一步我们完成头部文件和地铁图容器样式的编写，让地铁图容器充满网页。<pre class="prettyprint codestyle"><!DOCTYPE html> |
<html> | <html> | ||
<head> | <head> | ||
| 第41行： | 第41行： | ||
</pre> | </pre> | ||
</div></div><div class="serve-explain-text">至此，我们完成了一个更加完整的地图展示的例子。<br/></div> | </div></div><div class="serve-explain-text">至此，我们完成了一个更加完整的地图展示的例子。<br/></div> | ||
| + | <div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span></span></div></div></div> | ||
2022年8月19日 (五) 14:25的最后版本
地铁图展示
我们从展示一个北京的地铁图开始。以下为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>
至此，我们完成了一个更加完整的地图展示的例子。