var start = new BMap.Point(118.896598,31.939698); var end = new BMap.Point(118.803885,31.97613); transit.search(start, end);
时间: 2024-05-27 12:07:50 浏览: 23
这段代码是使用百度地图的JavaScript API进行路径规划。其中,start和end分别是起点和终点的经纬度坐标(这里是南京市的两个地点),transit是百度地图API中提供的公交路线规划对象,search方法用于发起路线规划请求。具体的操作步骤是:通过百度地图API获取起点和终点的经纬度坐标,然后通过transit.search方法发起路线规划请求,最后根据返回的结果展示公交路线规划信息。
相关问题
在jsp页面实现百度地图定位以及导航功能
实现百度地图定位和导航功能需要以下步骤:
1. 在jsp页面中引入百度地图API的JavaScript文件和CSS文件。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图定位和导航功能</title>
<link rel="stylesheet" href="http://api.map.baidu.com/api?v=2.0&ak=您的密钥">
<style type="text/css">
#map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<script src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils.min.js"></script>
</body>
</html>
```
2. 创建地图容器和地图对象,并设置地图中心点和缩放级别。
```javascript
var map = new BMap.Map("map"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点和缩放级别
```
3. 添加定位控件和导航控件。
```javascript
// 添加定位控件
var geolocationControl = new BMap.GeolocationControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
enableAutoLocation: true,
locationIcon: new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
imageOffset: new BMap.Size(-23, -25)
})
});
map.addControl(geolocationControl);
// 添加导航控件
var navigationControl = new BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_ZOOM
});
map.addControl(navigationControl);
```
4. 获取当前位置信息,并在地图上显示。
```javascript
// 获取当前位置信息
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function (position) {
if (this.getStatus() === BMAP_STATUS_SUCCESS) {
var point = new BMap.Point(position.longitude, position.latitude);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.panTo(point); // 将地图中心点移动到当前位置
}
});
```
5. 实现导航功能,获取起点和终点坐标,并调用百度地图导航API。
```javascript
// 实现导航功能
var start = new BMap.Point(116.404, 39.915); // 起点坐标
var end = new BMap.Point(116.368, 39.913); // 终点坐标
var driving = new BMap.DrivingRoute(map, {
renderOptions: {
map: map,
autoViewport: true
}
});
driving.search(start, end);
```
完整的示例代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图定位和导航功能</title>
<link rel="stylesheet" href="http://api.map.baidu.com/api?v=2.0&ak=您的密钥">
<style type="text/css">
#map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<script src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils.min.js"></script>
<script type="text/javascript">
var map = new BMap.Map("map"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点和缩放级别
// 添加定位控件
var geolocationControl = new BMap.GeolocationControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
enableAutoLocation: true,
locationIcon: new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
imageOffset: new BMap.Size(-23, -25)
})
});
map.addControl(geolocationControl);
// 添加导航控件
var navigationControl = new BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_ZOOM
});
map.addControl(navigationControl);
// 获取当前位置信息
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function (position) {
if (this.getStatus() === BMAP_STATUS_SUCCESS) {
var point = new BMap.Point(position.longitude, position.latitude);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.panTo(point); // 将地图中心点移动到当前位置
}
});
// 实现导航功能
var start = new BMap.Point(116.404, 39.915); // 起点坐标
var end = new BMap.Point(116.368, 39.913); // 终点坐标
var driving = new BMap.DrivingRoute(map, {
renderOptions: {
map: map,
autoViewport: true
}
});
driving.search(start, end);
</script>
</body>
</html>
```
注意:在使用百度地图API时,需要先申请密钥并引入相应的JavaScript文件和CSS文件。示例代码中的密钥需要替换为自己的密钥。
百度地图实现Marker沿路线运动
百度地图实现Marker沿路线运动的方法如下:
1.首先需要引入百度地图API的JavaScript文件,然后创建一个地图实例。
2.在地图上添加一个Marker,并设置Marker的图标和位置。
3.使用百度地图的API中的Polyline对象创建一条折线,并设置折线的路径。
4.使用百度地图的API中的DrivingRoute对象创建一个驾车路线实例,并设置起点和终点。
5.使用驾车路线实例的search()方法搜索驾车路线。
6.在驾车路线搜索完成后,使用驾车路线实例的getResults()方法获取驾车路线结果。
7.将驾车路线结果中的所有路段的路径合并成一个数组,并使用百度地图的API中的Polyline对象创建一条新的折线。
8.使用百度地图的API中的MarkerAnimation类创建一个Marker动画实例,并设置Marker动画的路径和速度。
9.启动Marker动画实例的start()方法,开始Marker沿路线运动。
下面是一个示例代码:
```javascript
// 引入百度地图API
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
// 创建地图实例
var map = new BMap.Map("container");
// 创建Marker实例
var marker = new BMap.Marker(new BMap.Point(116.404, 39.915));
// 设置Marker图标
var icon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
offset: new BMap.Size(10, 25),
imageOffset: new BMap.Size(0, 0 - 10 * 25)
});
marker.setIcon(icon);
// 添加Marker到地图上
map.addOverlay(marker);
// 创建折线实例
var polyline = new BMap.Polyline([
new BMap.Point(116.404, 39.915),
new BMap.Point(116.414, 39.915),
new BMap.Point(116.424, 39.915)
], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
// 添加折线到地图上
map.addOverlay(polyline);
// 创建驾车路线实例
var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
// 设置起点和终点
var start = new BMap.Point(116.404, 39.915);
var end = new BMap.Point(116.424, 39.915);
driving.search(start, end);
// 监听驾车路线搜索完成事件
driving.setSearchCompleteCallback(function(results){
// 获取驾车路线结果
var plan = results.getPlan(0);
var route = plan.getRoute(0);
// 合并所有路段的路径
var path = [];
for (var i = 0; i < route.getNumSteps(); i++) {
var step = route.getStep(i);
var points = step.getPath();
for (var j = 0; j < points.length; j++) {
path.push(points[j]);
}
}
// 创建新的折线实例
var newPolyline = new BMap.Polyline(path, {strokeColor:"red", strokeWeight:6, strokeOpacity:0.5});
// 添加新的折线到地图上
map.addOverlay(newPolyline);
// 创建Marker动画实例
var markerAnimation = new BMap.MarkerAnimation(marker, newPolyline.getPath(), 100);
// 启动Marker动画
markerAnimation.start();
});
```
相关推荐
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)