html通过调用百度js api接口绘制杭州地铁1至3号线路图
时间: 2024-06-09 07:04:56 浏览: 136
js点击绘制地铁线路图地铁站(可自定义颜色)百度map_subway line
首先,需要在百度地图开放平台申请一个API Key,然后引入百度地图API的JavaScript文件和地铁线路数据文件。下面是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>杭州地铁1-3号线路图</title>
<script src="http://api.map.baidu.com/api?v=2.0&ak=你的API Key"></script>
<script src="http://mapv.baidu.com/build/mapv.min.js"></script>
<style type="text/css">
#map {
height: 600px;
margin: 0 auto;
width: 800px;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// 地铁线路数据
var lineData = [
{
name: '1号线',
color: '#ee3d67',
path: [
[120.21936, 30.20801],
[120.21036, 30.21401],
// ...省略其他站点坐标
[120.09836, 30.27401]
]
},
{
name: '2号线',
color: '#3d85c6',
path: [
[120.18536, 30.27001],
[120.18436, 30.26601],
// ...省略其他站点坐标
[120.11936, 30.25001]
]
},
{
name: '3号线',
color: '#8bc53f',
path: [
[120.19136, 30.26101],
[120.18736, 30.25601],
// ...省略其他站点坐标
[120.15336, 30.29501]
]
}
];
// 创建地图实例
var map = new BMap.Map("map");
// 设置地图中心点
var point = new BMap.Point(120.18636, 30.26501);
map.centerAndZoom(point, 13);
// 绘制地铁线路
lineData.forEach(function(line) {
var polyline = new BMap.Polyline(line.path, {
strokeColor: line.color,
strokeWeight: 6,
strokeOpacity: 0.8
});
map.addOverlay(polyline);
});
// 添加地图控件
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.GeolocationControl());
</script>
</body>
</html>
```
在上述代码中,我们使用了百度地图的JavaScript API来创建地图实例、设置地图中心点、绘制地铁线路、添加地图控件等。具体的方法和属性可以参考[百度地图API文档](http://lbsyun.baidu.com/index.php?title=jspopular)。
需要注意的是,地铁线路数据需要自行获取,这里只是简单的示例数据。获取方法可以参考[百度地图开放平台的线路规划接口](http://lbsyun.baidu.com/index.php?title=webapi/direction-api-v2),也可以通过手动输入站点坐标的方式获取。
阅读全文