百度地图api调用实现车载导航功能

1、进入百度地图开放平台登录账号

2、百度地图api密钥获取

要想使用百度地图的api就需要申请创建对应的应用功能并获取AK密钥，从而才可以成功调用api的功能模块使用。

3、百度地图api密钥获取

选择相应的应用类型和启用服务，设置项目需求的白名单域名，没有域名限制可直接输入*，表示不限制访问，拿到对应的AK密钥就可以进行后续代码的实现了。

4、进入示例中心—驾车线路规划模块

http://lbsyun.baidu.com/jsdemo.htm#sLngLatSearchPath

5、两种车载轨迹实现方式

两种方式基本的html标签和css样式大致相同唯一的区别在于js上，故只将js区分出来说明。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style type="text/css">body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}#container{width:100%;height:100%;}#result{position: fixed;top: 10px;left: 20px;width: 300px;height: 40px;line-height: 40px;text-align: center;background: #fff;box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);border-radius: 7px;z-index: 99;}</style><script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script><title>根据起点和终点经纬度驾车导航</title>
</head>
<body><div id="container"></div><div id='result'>根据起点和终点经纬度驾车导航路线</div><script>//放入具体实现导航功能代码即可</script>
</body>
</html>

①第一种根据起点终点经纬度查询驾车路线

1、更改html里面的ak密钥为自己申请的密钥

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>

2、底图加载至<div>并设置中心点

var map = new BMapGL.Map("container");
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);

3、以经纬度设置位置点，并调用车载路线规划函数实现

 var p1 = new BMapGL.Point(116.301934,39.977552);var p2 = new BMapGL.Point(116.508328,39.919141);var driving = new BMapGL.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});driving.search(p1, p2);

②第二种通过点击事件从当前初始经纬度位置到达任意点击位置的车载导

1、更改html里面的ak密钥为自己申请的密钥

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>

2、底图加载至<div>并设置中心点

var map = new BMapGL.Map("container");
map.centerAndZoom(new BMapGL.Point(116.304, 39.915), 15);

3、增加缩放并设置起始点

//增加缩放功能
map.enableScrollWheelZoom(true);
//设置起始点
var p1 = new BMapGL.Point(116.301934, 39.977552);

4、添加点击监听事件并获取点击点为终点位置，进行起点至终点的车载导航实现

 map.addEventListener("click", function (e) {var p2 = new BMapGL.Point(e.latlng.lng, e.latlng.lat);map.clearOverlays();var driving = new BMapGL.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } });driving.search(p1, p2);console.log("我被点击了"); //测试点击事件是否设置成功})

这里的p1是起始点，是以经纬度设置定位的即通过var p1 = new BMapGL.Point(116.301934, 39.977552);
p2是点击之后获得的点，它的经纬度是通过点击事件e发生之后自动赋值给p2的。
实际应用中可以根据车辆的实际定位设置当前车辆位置为起始点，p2是鼠标点击获取的点位，意指通过鼠标点击之后从当前p1位置车载导航至p2。

6、总结

百度地图车载导航api的调用，在成功申请ak密钥并设置好访问白名单的情况下时，只需进行实现过程1→2→3→4步将JS代码复制进<script></script>标签里即可完成车载导航功能的调用。

7、完整源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style type="text/css">body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}#container{width:100%;height:100%;}#result{position: fixed;top: 10px;left: 20px;width: 300px;height: 40px;line-height: 40px;text-align: center;background: #fff;box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);border-radius: 7px;z-index: 99;}</style><script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script><title>根据起点和终点经纬度驾车导航</title>
</head>
<body><div id="container"></div><div id='result'>根据起点和终点经纬度驾车导航路线</div><script>//放入具体实现导航功能代码即可var map = new BMapGL.Map("container");map.centerAndZoom(new BMapGL.Point(116.304, 39.915), 15);//增加缩放功能map.enableScrollWheelZoom(true);var p1 = new BMapGL.Point(116.301934, 39.977552);map.addEventListener("click", function (e) {var p2 = new BMapGL.Point(e.latlng.lng, e.latlng.lat);map.clearOverlays();var driving = new BMapGL.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } });driving.search(p1, p2);console.log("我被点击了");//测试点击事件是否设置成功})</script>
</body>
</html>