js 百度地图显示两条道路
时间: 2023-10-05 13:12:59 浏览: 76
如果你想在百度地图上显示两条道路,你可以使用百度地图 JavaScript API 来实现。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图显示两条道路</title>
<style type="text/css">
#map {
height: 500px;
width: 100%;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的API密钥"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// 创建地图实例
var map = new BMap.Map("map");
// 设置中心点坐标和地图级别
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
// 添加两条道路
var road1 = [
new BMap.Point(116.404, 39.915),
new BMap.Point(116.414, 39.915),
new BMap.Point(116.424, 39.915)
];
var road2 = [
new BMap.Point(116.404, 39.905),
new BMap.Point(116.414, 39.905),
new BMap.Point(116.424, 39.905)
];
var polyline1 = new BMap.Polyline(road1, {strokeColor:"red", strokeWeight:6, strokeOpacity:0.5});
var polyline2 = new BMap.Polyline(road2, {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
map.addOverlay(polyline1);
map.addOverlay(polyline2);
</script>
</body>
</html>
```
在这个示例代码中,我们创建了一个地图实例,设置了地图的中心点坐标和地图级别。然后,我们创建了两条道路,分别用红色和蓝色的线条表示,并添加到地图上。你可以根据自己的需求修改这些代码,来显示任意数量和形状的道路。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)