本文介绍了如何利用百度地图JavaScript API创建一个功能，使得一个图标能沿着地图上的选定路线进行运动。首先从jQuery插件库获得灵感，然后深入研究百度地图API，特别是Map和DrivingRoute类。通过监听地图上的点击事件获取起始点坐标，用户可以自定义起点，然后通过按钮触发事件，搜索驾车最短时间路线并更新图标位置，实现动态运动效果。
在学习jQuery时，浏览到一个比较有意思的网页：jQuery插件库 http://www.jq22.com/，里面有很多封装好的插件库，然后，在地图插件里看到一个比较有意思的功能—路书，一个小车自己在地图上跑。
百度一下这个路书，感觉发现了 百度地图javascript api 这个新世界，有许多现成的示例可以参考
这里，主要是参考百度地图示例demo中的GPS功能-单个标注点的轨迹运动
功能实现简单来说就是，在百度地图上，根据起始点坐标，创建出一条路线，之后设置一个icon在该线上进行运动。
首先，查看源码后，可以看到该方法主要用到两个关键的类库Map和DrivingRoute，从百度地图中的JavaScript API 类参考可以找到，其中有关于两类库的详细说明。
然后呢，源码只是固定的起始点坐标，把坐标改成可以在地图上选取的更有意思一点。
实现的功能是在地图上选取起始点，再进行单点运动。
具体的过程是：
- 设置鼠标监听事件，左键点击地图，获取到起点的经纬度坐标，右击后去终点的坐标，并将值赋到输入框中
- 之后在按钮点击事件触发后，从输入框中取出起始点的经纬度坐标，使用new BMap.point（）方法创建起始点；之后有了起始点后，
- 使用new BMap.DrivingRoute(map)创建出驾车路线，再使用driving.search(myP1, myP2)方法进行路线搜索。
- 使用driving.getResults().getPlan(0).getRoute(0).getPath();方法获取一系列的驾车路线点，之后根据setTime方法刷新Mario的位置，就达到了该功能的效果。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content=
最低0.47元/天 解锁文章
扫一扫
2958
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
