百度地图开发，实时生成路线中：IconSequence类、Symbol类怎么使用

发布于
2017-10-10

一个地图项目，使用的百度地图。
需求是，根据终端实时返回的坐标点，生成移动的路径，最后希望如下图效果：

图片描述

代码如下：

//创建矢量图标类
var Symbol = new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_OPEN_ARROW, //百度地图预设向上的箭头
{
    fillColor: '#F00', //图标填充颜色
    fillOpacity: 1, //图标填充透明度
    scale: 1.5, //图标缩放大小
    rotation : '90deg', //图标旋转角度
    strokeColor : '#008DD5', //线填充颜色
    strokeWeight : 2, //线的透明度
    strokeOpacity : 2, //线宽
});

//设置折线样式符号显示
var iconSequence = new BMap.IconSequence(Symbol, '5px', '5px', true);

//设置折线
var pl = new BMap.Polyline(routeArr, //测试的坐标点集合
{
//    strokeColor : '#008DD5',
//    strokeWeight : 2,
//    strokeOpacity : 1
}, {iconSequence : iconSequence});
                                
//添加覆盖物
map.addOverlay(pl);

暂时实现如下：
图片描述

仍然是默认的样式，将代码中 “设置折线” 部分注释取消，样式是有改变，但是没有实现想要的效果。

求助：
最后还是想实现：在起始位置有个起始图标、整个路线上有箭头、当前位置是marker标识。
在百度地图的开发文档中，也确实找到了提供的方法，链接是：http://lbsyun.baidu.com/cms/j...，可没有demo。
本人仿照marker的Icon类来写，也就是上面的效果，最后感觉最重要的就是IconSequence类、Symbol类，这两个类的使用问题。
希望能有大神帮忙指出本人的错误或者提供一个简单的demo,不甚感激！！！

javascript windows

html5

阅读 12.2k

2 个回答

Petu

✓ 已被采纳

PS：

因为还有其他工作安排所以多花了点时间，两天过去了，果然还是没人回答，表示不开心、、、不过，幸好还是自己解决了需求，虽然还是有bug。

废话不多说，先贴代码：

//路线 (折线) IE8及以下无法显示折线
        function polyLine()
        {    
            var sym = new BMap.Symbol
            (
                BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, //百度预定义的 箭头方向向下的非闭合箭头
                {
                    fillColor : '#0F0', //设置矢量图标的填充颜色。支持颜色常量字符串、十六进制、RGB、RGBA等格式
                    fillOpacity : 1, //设置矢量图标填充透明度,范围0~1
                    scale : 0.5, //设置矢量图标的缩放比例
                    rotation : 90, //设置矢量图标的旋转角度,参数为角度
                    strokeColor : '#FFF', //设置矢量图标的线填充颜色,支持颜色常量字符串、十六进制、RGB、RGBA等格式
                    strokeOpacity : 1, //设置矢量图标线的透明度,opacity范围0~1
                    strokeWeight : 2, //旋设置线宽。如果此属性没有指定，则线宽跟scale数值相
                }
            );
            
            var iconSequence = new BMap.IconSequence
            (
                sym, //symbol为符号样式
                '5%', //offset为符号相对于线起点的位置，取值可以是百分比也可以是像素位置，默认为"100%"
                '5%', //repeat为符号在线上重复显示的距离，可以是百分比也可以是距离值，同时设置repeat与offset时，以repeat为准
                false //fixedRotation设置图标的旋转角度是否与线走向一致，默认为true
            );
            
            //设置折线
            var polyline = new BMap.Polyline
            (
                linePoints, //测试的坐标点集合
                {
                    icons : [iconSequence], //图标集合  **也是我之前没有实现样式改变的最大原因**
                    strokeColor : '#0F0', //折线颜色 尽量与图标填充色保持一样
                    strokeOpacity : 1, //折线的透明度，取值范围0 - 1
                    strokeWeight : 5, //折线的宽度，以像素为单位
                });
            
            //向地图中添加覆盖物 polyline
            map.addOverlay(polyline);
            
        };

参考网址：http://bbs.lbsyun.baidu.com/f...

效果：
图片描述

总结：

最后还是在 百度地图社区 里面找到的一段源码。当然，这还只是一个demo,实现的效果还不是很好，只能在后期应用中再改。

问题：

    1.IconSequence类中的offset、repeat属性，用 px 像素的话，会出现图标挤在一起的现象，
    我还是使用 % 百分比，当然对于百分比的取值，也比较尴尬，因为地图一旦缩小，图标就会挤在一起，求解决方案。
    2.此demo，在IE、Chrome、FireFox测试，发现在后两者中有一个小问题，
    就是在地图中任意位置点击一下，折线上的图标会发生偏移，然后进行缩放或者刷新，又会恢复，
    暂时还不知道原因，同求解决方案。
    3.折线终点的图标，也是地图中的中心点，这样就存在一个问题。
    若是折线太长，或者太短，我们有没有办法进行一个优化，让路线始终在地图的可是区域内？