/CanvasTrace

CanvasTrace – 使用canvas创建带有边框和方向箭头的地图轨迹

Primary LanguageJavaScript

CanvasTrace

在百度地图上使用canvas创建路线轨迹,可以方便的通过配置绘制出炫酷的地图轨迹。 示例传送门

Features

  • 支持轨迹线描边
  • 支持自定义轨迹样式
  • 支持显示实时方向箭头
  • 支持方向箭头的动画

Usage

 <script type="text/javascript" src="CanvasTrace.js"></script>
var canvasTrace = new CanvasTrace(options)

Options

属性 必填 含义
data Array,轨迹数据,格式为[{lat: 36,lng: 120},...]
map Object,BMap的实例
color String,轨迹颜色,格式同canvasstrokeStyle,如"red","rgba(50, 50, 255, 0.7)"具体请看canvas文档strokeStyle
width Number,轨迹线的宽度,同样,格式同canvaslineWidth
showArrow 否,默认false Boolean,是否显示轨迹线上的方向箭头,默认不显示
showAnimation 否,默认false Boolean,是否显示轨迹线上的方向箭头的动画,默认不显示

todo list

  • 轨迹的颜色渐变。根据某个值(如速度)设置不同的颜色,并实现渐变效果;
  • 动画。实现带有动画的方向箭头。(已实现)