百度地图轨迹开发,如何绘制带有箭头的折线

2020-02-24 18:38:12

参考地址 百度地图轨迹开发,如何绘制带有箭头的折线

最近在开发百度地图时,需要绘制行人行走的轨迹,并在轨迹内使用箭头表示方向,和我们平常使用百度地图导航时一样,能通过箭头表示人行走的方向。
       通过百度地图API,我们很容易能找到划线的方法Polyline() ,但我们该如何在绘制的线上,展示箭头方向呢?进一步查看百度地图API发现IconSequence类,此类用于设置polyline上的符号显示。

结合百度地图的API:

 

  因此,我们就可以实现绘制带箭头方向的折线。

复制代码

        //创建地图
            var map = new BMap.Map('map');                  var point = new BMap.Point(114.065537,22.553321);
                     map.centerAndZoom(point , 13);
                    map.enableScrollWheelZoom();             //坐标点
            Points=[
            {lng: 114.014, lat: 22.687},
            {lng: 114.0143, lat: 22.742},
            {lng: 114.09746, lat: 22.745}
            ]        //绘制箭头及其样式
        var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
                scale: 0.6,//图标缩放大小
                strokeColor:'#fff',//设置矢量图标的线填充颜色
                strokeWeight: 2,//设置线宽            });            var icons = new BMap.IconSequence(sy, '100%', '10%',false);//设置为true,可以对轨迹进行编辑
            //绘制折线以及样式
            var trackLine = new BMap.Polyline(potArr,{
                strokeColor:"#18a45b",//设置颜色
                strokeWeight:8 ,//宽度
                strokeOpacity:0.8,//折线的透明度,取值范围0 - 1
                enableEditing: false,//是否启用线编辑,默认为false
                enableClicking: false,//是否响应点击事件,默认为true                icons:[icons]
            });
            map.addOverlay(trackLine);

复制代码

效果如下图:



  • 2017-03-13 12:07:19

    JavaScript原型与原型链分析

    JavaScript没有类的概念,但几乎所有的东西又是基于对象的,同时也能实现继承,这就是js跟其他OOP语言最大的不同之处,这也是js最难理解的一块。下面我来说说我个人的理解。

  • 2017-03-15 07:43:19

    NodeJS服务器”热部署“代码,实现动态调试

    如果你有 PHP 开发经验,会习惯在修改 PHP 脚本后直接刷新浏览器以观察结果,而你在开发 Node.js 实现的 HTTP 应用时会发现,无论你修改了代码的哪一部份,都必须终止Node.js 再重新运行才会奏效。这是因为 Node.js 只有在第一次引用到某部份时才会去解析脚本文件,以后都会直接访问内存,避免重复载入,而 PHP 则总是重新读取并解析脚本(如果没有专门的优化配置)。

  • 2017-03-16 13:37:58

    mysql中如何使用INSERT一次性插入多条记录

    看到这个标题也许大家会问,这有什么好说的,调用多次INSERT语句不就可以插入多条记录了吗!但使用这种方法要增加服务器的负荷,因为,执行每一次 SQL服务器都要同样对SQL进行分析、优化等操作。

  • 2017-03-18 20:17:09

    Linux上vi(vim)编辑器使用教程

    vi(vim)是上Linux非常常用的编辑器,很多Linux发行版都默认安装了vi(vim)。vi(vim)命令繁多但是如果使用灵活之后将会大大提高效率。vi是“visual interface”的缩写,vim是vi IMproved(增强版的vi)。在一般的系统管理维护中vi就够用,如果想使用代码加亮的话可以使用vim。下面vps侦探整理一下vi的使用教程:包含vi的基本介绍、使用模式、文件的打开关闭保存、插入文本或新建行、移动光标、删除、恢复字符或行、搜索等等,算是一篇比较适合新手学习vi的教程。