实现
百度地图定位和导航功能需要以下
步骤：
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,
enableAuto
Location: true,
locationIcon: new BMap.Icon("http://
api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
ima
geOffset: 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,
enableAuto
Location: true,
locationIcon: new BMap.Icon("http://
api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
ima
geOffset: 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文件。示例代码
中的密钥需要替换为自己的密钥。
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
