地圖上自定義標記點和軌跡線的實現

看了百度的地圖開放平台，還是挺有意思的。這里記錄一下標記點和線的方法，一是用來完善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);
  }

依舊可以看到效果的，加粗的紅線就是軌跡：

這里的折線可以分別設置描邊粗細、顏色、填充顏色等內容。老王認為看到這里，大家應該都了然於心了。多的就不說了，歡迎關注微信公眾號  懂一點技術的老王。