J2EE项目总结
- JavaScript API GL v1.0是目前版本最新的百度地图API,相比于JavaScript API v3.0界面更加美观,功能更加强大。
项目需求
- 从后端读取起点和终点的地址,在地图上显示两者之间的路径。
- 获得路径上所有点的坐标,用以显示卡车的虚拟位置。
具体实现
解析地址
- 从官方文档中可以得到示例代码:
1 | var map = new BMapGL.Map('container'); |
- 分析代码可以得知:getPoint函数用以将地址字符串解析为Point,并通过回调函数进一步对Point进行处理。
显示路径
- 获得路径可以有多种选择,例如:驾车路线,步行路径,公交路径,骑行路径等等。百度也提供了货车路径的规划,但需要向百度递交申请,过程较为繁琐,所以最终考虑选择使用驾车路线规划。
- 从官方文档中可以得到示例代码:
1 | var map = new BMapGL.Map("container"); |
- 分析代码可以得知:search函数用以获得p1,p2两个坐标之间的路径
- 将以上两个示例代码结合可以很自然的想到以下代码:
1 | var map = new BMapGL.Map("container"); |
- 但实际上以上代码是不能运行的,在search函数被调用之前输出p1和p2可以发现两者都是undefined。这是因为getPoint函数其实是异步函数,执行顺序并非按照顺序执行,所以会导致无法对p1和p2赋值。所以改变策略,考虑使用函数嵌套的手段进行赋值:
1 | var map = new BMapGL.Map("container"); |
- 经测试,可以正常运行:
获取坐标
- 获得坐标在官方文档中并没有相关的代码供参考,所以只能自行解决。
- 网络上许多和获取路径上坐标的代码多为:
1 | driving.search(p1, p2); |
- 但这实际上是无法运行的,会显示Cannot read property ‘getPlan’ of undefined:
- 在查看了计算驾车距离和时间的相关示例代码后可以知道在DrivingRoute中参数renderOptions可以传入一个回调函数完成对route结果的处理,即:
1 | var p2 = point; |
- 以上代码可以成功输出,返回结果为一个数组,包含路径上所有点的经纬度:
- 可以使用Marker在地图上标注点的位置:
1 | var marker1 = new BMapGL.Marker(new BMapGL.Point(plan[i].lng, plan[i].lat)); |
完整代码
1 | function generateMap(sendAddress, receiveAddress, createTime, status) { |