mapbar -- 实时在地图上标注车辆位置

来源:互联网 发布:亿乐社区主站源码 编辑:程序博客网 时间:2024/05/07 16:05

正做一个车辆实时跟踪的东东,车辆位置是实时变化的,需要在地图上标注车辆的位置,
其实做法很简单,如果是mapx或者其它地图控件,直接增加一个图层,然后在图层上画车辆就行了,
但 mapbar 就不行,虽然 mapbar 能提供标注功能,但那个标注信息是需要写入地图信息数据库的,
无法实现标注实时变化的车辆位置,因为客户端是用脚本处理的,对于一些位置的处理,都得用脚本,
所以可以尝试自己在地图上画车辆位置,自己画
这就得知道地图的经纬度情况,因为初始位置可以设置车辆位置为地图中心点,然后在中心点显示位置,
这里可以参考地图提供的MMarker对象,MMarker是用来标注位置的,这里得说一下mapbar地图的一些属性和方法,

var maplet = null;
var marker = null;

function initMap(){
    maplet = new Maplet("mapbar");
    var sa = new Array();
    for(var i in maplet){
        var s = i.htmlEncode();
        var v = maplet[i] + "";
        v = v.htmlEncode();
        if(i.length<20){
            s = s + "                      ";
            s = s.substr(0,20);
        }
        sa[sa.length] = s.htmlEncode() + " " + v;
    }
    sa.sort();
    var ss = sa.join("<br>");
    var win = window.open();
    win.document.write("<pre style='font-size:9pt'>" + ss + "</pre>");
}

添加标注的代码格式就是:

var marker = new MMarker(
    point,
    new MIcon("../images/test.gif",32,32)
);
maplet.addOverlay(marker);

这里关键的就是MMarker构造函数的第一个参数该怎么设置,
我们需要知道第一个参数的格式,遗憾的是脚本无法获取参数的具体类型,
不过可以参照设置中心点的语句:

    maplet.centerAndZoom(new MPoint(108.1911,22.4912), 10);

这里参数一是点,点是代表经纬度,那MMarker第一个参数是不是也是这种格式?
我们试着传递这个参数看看:

var marker = new MMarker(
    new MPoint(108.1911,22.4912),
    new MIcon("../images/test.gif",32,32)
);
maplet.addOverlay(marker);

测试真的能在那个位置标注出来,这样添加标注后,
即使移动地图,将标注移出可见区域,然后再移进可见区域,标注点依旧可见,
如果不用地图的标注功能,自己在上面画标注点,那就得进行屏幕坐标与经纬度的转化,并控制是否可见,
既然地图提供标注功能,直接用现成的,就方便多了。

有兴趣的可以研究一下客户端的控制,并可以增加一些实用的功能,
比如在地图上绘制车辆一段时间内的行驶路线。

注意,添加标注后,存在一个小bug,就是标注的图标区域不能接受鼠标事件。

图标添加上去了,那怎么添加文字说明呢,车辆位置跟踪,还得显示车号啊,如果有多辆车时。
不知道是否提供显示文字的功能,有两种做法,一种就是将文字放到图标上(文字生成图片),
另一种方式就是自己根据图标位置显示文字。

原创粉丝点击