想仿淘宝做一个物流查询，分为：寄件点、当前点、 收件点 和 路线图。

快递已走的路径（寄件点到当前点的颜色）和未走的路径（当前点到收件点）用 颜色 进行区分。

利用百度地图提供的API（当时遇到了点问题，所以用的版本是 JavaScript API V2.0）—— 驾车路线规划。

百度地图提供的驾车路线规划包括：起点，终点，途经点；和 物流查询 中我可以提供的数据恰好对应。

getMap() {
      var map = new BMap.Map(this.item.id, { enableMapClick: false });
      map.enableScrollWheelZoom(true);
      var start = new BMap.Point(this.startLng, this.startLat);
      var end = new BMap.Point(this.endLng, this.endLat);
      var current = new BMap.Point(this.currentLng, this.currentLat);

      // 自定义图标
      var startIcon = new BMap.Icon(
        require("../../assets/images/point.png"),
        new BMap.Size(25, 25)
      );
      var currentIcon = new BMap.Icon(
        require("../../assets/images/car.png"),
        new BMap.Size(25, 25)
      );
      var endIcon = new BMap.Icon(
        require("../../assets/images/point.png"),
        new BMap.Size(25, 25)
      );
      
      var driving = new BMap.DrivingRoute(map, {
        renderOptions: { map: map, autoViewport: true },
        
        onPolylinesSet: function(Route) {
          for (var i = 0; i < Route.length-1; i++) {
            var polyline = Route[i].getPolyline(); //获取线条遮挡物
            polyline.setStrokeColor("#1474E4"); //设置颜色
            polyline.setStrokeWeight(6); //设置宽度
            polyline.setStrokeOpacity(0.8); //设置透明度
          }
        },
        
        onMarkersSet: function(routes) {
          //标注点完成回调
          map.clearOverlays(); //删除点
          var myStart = new BMap.Marker(start, { icon: startIcon });
          map.addOverlay(myStart); //添加自定义起点图标
          var myEnd = new BMap.Marker(end, { icon: endIcon });
          map.addOverlay(myEnd); //添加自定义终点图标
          var myCurrent = new BMap.Marker(current, { icon: currentIcon });
          map.addOverlay(myCurrent); //添加自定义途径点图标
        }
      });
      
      driving.search(start, end, { waypoints: [current] });
    }

注：代码中寄件点、当前点、收件点的坐标都是从后台接口传来的点的经纬度信息。

示意图：




参考：https://my.oschina.net/Peron/blog/913188