该代码适用于需要在Web应用程序中集成百度地图并提供驾车路线规划功能的场景。例如,旅行规划网站、导航应用或物流管理系统。
这段代码利用百度地图API,实现了从起点到终点驾车路线规划的功能。它可以计算出路线的距离和预计时间,并在地图上显示路线。
await Promise.all([
this.loadScripts([
// 百度地图API
'https://api.map.baidu.com/api?type=subway&v=1.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240319170303',
// WebGL支持
'http://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240319170303',
// 其他功能库
'https://mapopen.bj.bcebos.com/github/BMapGLLib/InfoBox/src/InfoBox.js',
'https://mapopen.bj.bcebos.com/github/BMapGLLib/RichMarker/src/RichMarker.min.js',
'https://mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js',
'https://mapopen.cdn.bcebos.com/github/BMapGLLib/DistanceTool/src/DistanceTool.min.js',
]),
this.loadStyles([
// 百度地图样式
'http://api.map.baidu.com/res/webgl/10/bmap.css',
// 功能库样式
'http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css',
]),
])
该代码首先异步加载了百度地图API、WebGL支持库和一些可选的功能库。这些库提供了地图渲染、信息框、富标记、绘图管理和距离测量等功能。
const BMapGL = window.BMapGL
var map = new BMapGL.Map('allmap')
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12)
这段代码创建了一个新的百度地图实例并将其渲染到#allmap
元素中。它还将地图的中心点设置为北京并将其缩放级别设置为12。
var transit = new BMapGL.DrivingRoute(map, {
renderOptions: { map: map },
onSearchComplete: searchComplete,
onPolylinesSet: function () {
setTimeout(function () {
alert(output)
}, '1000')
},
})
该代码创建了一个DrivingRoute
对象,它用于规划驾车路线。renderOptions
指定了地图实例,onSearchComplete
函数在搜索完成时调用,onPolylinesSet
函数在路线绘制完成后调用。
var start = new BMapGL.Point(116.404844, 39.911836)
var end = new BMapGL.Point(116.308102, 40.056057)
这段代码定义了起点和终点的地理坐标。
transit.search(start, end)
该代码发起驾车路线规划搜索,并使用start
和end
作为起点和终点。
function searchComplete(results) {
if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
return
}
var plan = results.getPlan(0)
output += plan.getDuration(true) + '\n' //获取时间
output += '总路程为:'
output += plan.getDistance(true) + '\n' //获取距离
}
searchComplete
函数在搜索完成后调用。它检查搜索状态,如果成功,则获取第一条路线计划,并提取路线的距离和预计时间。
setTimeout(function () {
alert(output)
}, '1000')
这段代码在路线绘制完成后,使用setTimeout
函数延迟1秒弹出包含路线距离和预计时间的提示信息。
通过这段代码,我们成功实现了基于百度地图API的驾车路线规划功能。该代码结构清晰,易于理解和扩展。
经验与收获:
未来展望: