编写一个程序,利用百度地图api实现起点终点和中间点的连线(位置为经纬度),并动态展示轨迹
时间: 2023-06-16 08:07:52 浏览: 85
这个任务可以分为两个部分:1. 利用百度地图API绘制起点、终点和中间点的连线;2. 动态展示轨迹。
### 第一步:利用百度地图API绘制起点、终点和中间点的连线
首先,需要在百度地图开发者平台注册账号、创建应用并获取AK(API Key),这个过程不再赘述。
接下来,我们使用百度地图Javascript API来实现起点终点和中间点的连线。下面是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制起点终点和中间点的连线</title>
<style type="text/css">
#container {
width: 100%;
height: 500px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
// 创建地图实例
var map = new BMap.Map("container");
// 创建起点、终点和中间点的坐标
var startPoint = new BMap.Point(116.404, 39.915); // 北京天安门
var endPoint = new BMap.Point(116.427, 39.903); // 北京王府井
var midPoint = new BMap.Point(116.418, 39.917); // 北京东城区
// 设置地图中心点和缩放级别
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
// 创建起点、终点和中间点的图标
var startPointIcon = new BMap.Icon("http://map.baidu.com/image/us_mk_icon.png", new BMap.Size(22, 22), {
anchor: new BMap.Size(10, 10),
imageOffset: new BMap.Size(-0, -0)
});
var endPointIcon = new BMap.Icon("http://map.baidu.com/image/us_mk_icon.png", new BMap.Size(22, 22), {
anchor: new BMap.Size(10, 10),
imageOffset: new BMap.Size(-22, -0)
});
var midPointIcon = new BMap.Icon("http://map.baidu.com/image/us_mk_icon.png", new BMap.Size(22, 22), {
anchor: new BMap.Size(10, 10),
imageOffset: new BMap.Size(-44, -0)
});
// 创建起点、终点和中间点的标注
var startPointMarker = new BMap.Marker(startPoint, {icon: startPointIcon});
var endPointMarker = new BMap.Marker(endPoint, {icon: endPointIcon});
var midPointMarker = new BMap.Marker(midPoint, {icon: midPointIcon});
// 将起点、终点和中间点的标注添加到地图上
map.addOverlay(startPointMarker);
map.addOverlay(endPointMarker);
map.addOverlay(midPointMarker);
// 创建起点、终点和中间点之间的连线
var polyline = new BMap.Polyline([startPoint, midPoint, endPoint], {strokeColor: "blue", strokeWeight: 6, strokeOpacity: 0.5});
// 将连线添加到地图上
map.addOverlay(polyline);
</script>
</body>
</html>
```
在上面的代码中,我们首先创建了地图实例,并设置了地图的中心点和缩放级别。然后,我们分别创建了起点、终点和中间点的坐标,并使用`BMap.Point`来表示。接着,我们创建了起点、终点和中间点的图标,并使用`BMap.Icon`来表示。然后,我们分别创建了起点、终点和中间点的标注,并使用`BMap.Marker`来表示,并将标注添加到地图上。最后,我们创建了三个点之间的连线,并使用`BMap.Polyline`来表示,并将连线添加到地图上。
运行上面的代码,就可以在地图上看到起点、终点和中间点之间的连线了。
### 第二步:动态展示轨迹
为了实现动态展示轨迹,我们可以使用`BMap.DrivingRoute`来计算驾车路线,并使用`BMap.MovingMarker`来动态展示轨迹。下面是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态展示轨迹</title>
<style type="text/css">
#container {
width: 100%;
height: 500px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
// 创建地图实例
var map = new BMap.Map("container");
// 创建起点、终点和中间点的坐标
var startPoint = new BMap.Point(116.404, 39.915); // 北京天安门
var endPoint = new BMap.Point(116.427, 39.903); // 北京王府井
var midPoint = new BMap.Point(116.418, 39.917); // 北京东城区
// 设置地图中心点和缩放级别
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
// 创建起点、终点和中间点的图标
var startPointIcon = new BMap.Icon("http://map.baidu.com/image/us_mk_icon.png", new BMap.Size(22, 22), {
anchor: new BMap.Size(10, 10),
imageOffset: new BMap.Size(-0, -0)
});
var endPointIcon = new BMap.Icon("http://map.baidu.com/image/us_mk_icon.png", new BMap.Size(22, 22), {
anchor: new BMap.Size(10, 10),
imageOffset: new BMap.Size(-22, -0)
});
var midPointIcon = new BMap.Icon("http://map.baidu.com/image/us_mk_icon.png", new BMap.Size(22, 22), {
anchor: new BMap.Size(10, 10),
imageOffset: new BMap.Size(-44, -0)
});
// 创建起点、终点和中间点的标注
var startPointMarker = new BMap.Marker(startPoint, {icon: startPointIcon});
var endPointMarker = new BMap.Marker(endPoint, {icon: endPointIcon});
var midPointMarker = new BMap.Marker(midPoint, {icon: midPointIcon});
// 将起点、终点和中间点的标注添加到地图上
map.addOverlay(startPointMarker);
map.addOverlay(endPointMarker);
map.addOverlay(midPointMarker);
// 计算驾车路线
var driving = new BMap.DrivingRoute(map, {
renderOptions: {map: map, autoViewport: true},
onSearchComplete: function (results) {
if (driving.getStatus() == BMAP_STATUS_SUCCESS) {
// 创建轨迹动画
var path = driving.getResults().getPlan(0).getRoute(0).getPath();
var len = path.length;
var movingMarker = new BMap.MovingMarker(path[0], {
icon: new BMap.Icon("http://map.baidu.com/image/us_mk_icon.png", new BMap.Size(22, 22), {
anchor: new BMap.Size(10, 10),
imageOffset: new BMap.Size(-0, -0)
}),
speed: 2000,
enableRotation: true,
rotation: 0
});
map.addOverlay(movingMarker);
// 启动轨迹动画
var index = 0;
var timer = setInterval(function () {
if (index < len) {
movingMarker.setPosition(path[index]);
index++;
} else {
clearInterval(timer);
}
}, 100);
}
}
});
driving.search(startPoint, endPoint, {waypoints: [midPoint]});
</script>
</body>
</html>
```
在上面的代码中,我们首先创建了地图实例,并设置了地图的中心点和缩放级别。然后,我们分别创建了起点、终点和中间点的坐标,并使用`BMap.Point`来表示。接着,我们创建了起点、终点和中间点的图标,并使用`BMap.Icon`来表示。然后,我们分别创建了起点、终点和中间点的标注,并使用`BMap.Marker`来表示,并将标注添加到地图上。接着,我们使用`BMap.DrivingRoute`来计算驾车路线,并在`onSearchComplete`回调函数中创建了轨迹动画,并使用`BMap.MovingMarker`来表示轨迹动画,并使用`setInterval`函数来启动轨迹动画。
运行上面的代码,就可以在地图上看到起点、终点和中间点之间的连线,并动态展示轨迹了。