利用百度地图api实现起点终点和中间点的连线(位置为经纬度),并动态展示轨迹
时间: 2023-06-16 15:08:08 浏览: 102
要实现起点、终点和中间点的连线并展示轨迹,可以使用百度地图的JavaScript API。下面是一个简单的实现示例:
1. 引入百度地图JavaScript API的代码:
```html
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script>
```
其中,AK是你在百度地图开放平台申请的应用AK。
2. 创建地图容器:
```html
<div id="map" style="width: 100%; height: 500px;"></div>
```
3. 在JavaScript代码中初始化地图:
```javascript
var map = new BMap.Map("map"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和缩放级别
```
4. 添加起点、终点和中间点的标注:
```javascript
var start_point = new BMap.Point(116.404, 39.915); // 起点坐标
var start_marker = new BMap.Marker(start_point); // 创建标注
map.addOverlay(start_marker); // 添加标注到地图上
var end_point = new BMap.Point(116.434, 39.908); // 终点坐标
var end_marker = new BMap.Marker(end_point); // 创建标注
map.addOverlay(end_marker); // 添加标注到地图上
var middle_point = new BMap.Point(116.414, 39.908); // 中间点坐标
var middle_marker = new BMap.Marker(middle_point); // 创建标注
map.addOverlay(middle_marker); // 添加标注到地图上
```
5. 添加连线和轨迹:
```javascript
var polyline = new BMap.Polyline([start_point, middle_point, end_point], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}); // 创建连线
map.addOverlay(polyline); // 添加连线到地图上
var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}}); // 创建驾车实例
driving.search(start_point, end_point, {waypoints: [middle_point]}); // 添加中间点
```
上述代码实现了在地图上展示起点、终点和中间点的标注,并连接起点、中间点和终点的连线,同时展示驾车轨迹。你可以根据自己的需求进行调整和修改。