地图上自定义标记点和轨迹线的实现

Posted 2021-12-03 BinWin

看了百度的地图开放平台，还是挺有意思的。这里记录一下标记点和线的方法，一是用来完善X-MagicBox-820的小项目（连载的项目记录），二是给自己留下点笔记，感兴趣的小伙伴也可以试着调试调试看。

首先是标记点。假设已经做好了HTML页面和用于地图显示JavaScript脚本。老王将HTML和JavaScript做了解耦，方便业务的代码修改。关于画点，官方的文档很简练，只需三行代码即可：

 

var point = new BMapGL.Point(116.404, 39.915);   
var marker = new BMapGL.Marker(point);        // 创建标注   
map.addOverlay(marker);

 

 运行代码就会看到默认的红点标记，作为懂一点技术的老王，一下子就想到了自动打点的方法。自动更新点的坐标值就可以了呗，于是修改了代码。

//每秒更新一个值
setInterval(function () {
//用来构造坐标的变量
  var data = [];
  data[0] = pointx;
  data[1] = pointy;
  
  //更新坐标值，测试是朝一个方向走
  pointy = pointy + 0.01;
  point.push(data);
  //标记坐标点
  marker = new BMapGL.Marker(new BMapGL.Point(point[point.length-1][0],point[point.length-1][1])); // 创建点 
  map.addOverlay(marker);
}, 1000); 

实际效果什么样呢，老王录制了下来。这是默认的红点标记，还可以根据自己喜好修改点的图表，需要参考Icon类。老王暂时不做细化。

有了标记的点，连线自然是没有问题了，两点确定一条线段呗。实际的行程不会像老王这样的示例那么笔直的朝着一个方向，尤其在商业街什么的地方。所以，折线段的方法是比较合适的。继续在刚才的代码中修改一下添加连线的语句。思路就是每秒增加一条新增点和前一个点之间的连线。

//在点数大于1个时才开始绘制线条
  if(point.length > 1){
    var polyline = new BMapGL.Polyline([
    //新增点的坐标 
      new BMapGL.Point(point[point.length-2][0],point[point.length-2][1]),
    //前一个点的坐标
      new BMapGL.Point(point[point.length-1][0],point[point.length-1][1]),
    ], {strokeColor:"red", strokeWeight:5, strokeOpacity:0.5});   //创建折线 
    //连接两个点就画了一条线
    map.addOverlay(polyline);
  }

依旧可以看到效果的，加粗的红线就是轨迹：

这里的折线可以分别设置描边粗细、颜色、填充颜色等内容。老王认为看到这里，大家应该都了然于心了。多的就不说了，欢迎关注微信公众号  懂一点技术的老王。