百度地图Javascript API绘制轨迹

（首先贴两个网站：
1.百度地图API官方示例.
2.百度地图Javascript API v3.0参考类.

一、新建Html文档

新建文档可以直接从官方示例中复制一个模板

复制粘贴时 1处加一个"http"，2处替换为你申请的密钥;

二、轨迹的绘制

在官方示例中我们可以找到添加覆盖物的示例，里面有绘制折线的例子：

    var polyline = new BMap.Polyline([new BMap.Point(116.399, 39.910),new BMap.Point(116.405, 39.920),new BMap.Point(116.425, 39.900)], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});   //创建折线map.addOverlay(polyline);//添加折线

这是三个点两条线段组成的一个角。
思路：我们让每一个坐标与上一个坐标之间添加一条折线，只要坐标是连续变化的（没有瞬移），轨迹不就体现出来了吗
方法：自定义一个函数，参数为当前坐标：

var last_point;function draw_trail(lon,lat){var t = new BMap.Point(lon,lat);var polyline = new BMap.Polyline([last_point,t], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});   //创建折线map.addOverlay(polyline); last_point = t;
}

这样，需要绘制轨迹时调用这个函数即可。
测试时，坐标的经纬度可以通过鼠标在地图上拾取，测试代码如下：

map.addEventListener('mousemove',function(e){draw_trail(e.point.lng,e.point.lat);})

效果如下：

三、添加自定义图标

首先创建自定义图标：

//这里注意 heli2.png 放在html文档同层文件夹下，大小不能太大，40~50像素左右，否则加载不出来
var myIcon = new BMap.Icon('./heli2.png', new BMap.Size(40, 61), {offset: new BMap.Size(0, 0), // 指定定位位置imageOffset: new BMap.Size(0, 0) // 设置图片偏移                   });

在需要的地方 point 处添加图标：

var mk = new BMap.Marker(point,{icon:myIcon,rotation: 90,title: 'my helicopter'});//创建标注图标
map.addOverlay(mk);//将标注添加到地图中

要实现图标的跟随移动，则需要在新坐标处添加图标同时将上一个坐标处图标移除
所以，draw_trail()函数改为：

function draw_trail(lon,lat){var t = new BMap.Point(lon,lat);map.removeOverlay(mk); //先移除上一个图标mk = new BMap.Marker(t,{icon:myIcon,rotation:0,title: 'my helicopter'});//map.addOverlay(mk);//再添加新图标var polyline = new BMap.Polyline([last_point,t], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});   map.addOverlay(polyline); last_point = t;
}

效果图：

四、总结

至此，基本实现了轨迹的绘制，如有需要，可以在draw_trail()增加航向角参数，在自定义图标rotation属性中设置，实现方向的实时变化。
项目链接：https://github.com/Mr-Yslf/BlogResources.git

百度地图API绘制轨迹相关推荐

百度地图描绘轨迹html,百度地图API 绘制轨迹历史
DOCTYPE html> 2 3 4 5 6 7 body, html{width:100%;height:100%;overflow:hidden;margin:0;font-family: ...
android百度地图箭头,百度地图API绘制带头箭头的折线
源代码: body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;} #l-map{height:100%;wid ...
android百度地图轨迹实现,android 获取GPS经纬度在百度地图上绘制轨迹
实现将一组GPS模块获取的经纬度数据在百度地图上绘制轨迹 1.将经纬度转换成百度地图坐标 /** * 标准的GPS经纬度坐标直接在地图上绘制会有偏移,这是测绘局和地图商设置的加密,要转换成百度地图坐标 ...
百度地图api实现轨迹运动效果
百度地图api实现轨迹运动效果实现逻辑: 实现轨迹运动的效果无非就是将一段路程细化为很多个点,然后不过的根据这些点来画出移动轨迹. 实现流程: 1)使用DrivingRoute,根据起点和终点的位置 ...
android 获取GPS经纬度在百度地图上绘制轨迹
实现将一组GPS模块获取的经纬度数据在百度地图上绘制轨迹 1.将经纬度转换成百度地图坐标 /*** 标准的GPS经纬度坐标直接在地图上绘制会有偏移,这是测绘局和地图商设置的加密,要转换成百度地图坐标* ...
百度地图api 绘制乡镇边界
我们在使用百度地图api想要展示苏州市吴中区各乡镇的行政区范围: 百度api有提供了"添加行政区划"的示例:http://lbsyun.baidu.com/jsdemo.htm#c ...
Echarts结合百度地图API绘制热力图
最近项目中需要使用echarts与百度地图API结合来绘制事故发生热力图,在将其与百度地图结合的过程中遇到了一些问题,现将其过程与解决方案记录下,以供日后参考.echarts中结合百度地图API的热力 ...
python调用百度地图画轨迹图_百度地图 API 绘制路线
后台拿到数据返回给了jsp页面,并且显示到了地图上 . 现在要根据两个位点.绘制出他们之间的路线. 有实现过这个功能的大神,给指点一下,如果有实例,那当热是最好了. 下面是 : 我显示坐标的代码: v ...
根据经纬度坐标值在百度地图上绘制轨迹
因为项目需要做物体轨迹检测,所以要把物体移动的轨迹在百度地图上进行绘制和显示,于是就在网上找到了这个方法,现在做个记录方便以后查阅: 1.html 部分设置存放地图的容器和设置你的百度地图的ak ht ...

百度地图API绘制轨迹