vue里面实现百度地图 标记多点 地点连线

<template>
  <div id="allmap"></div>
</template>

<script>
export default {
     
  data() {
     
    return {
     
      arrayList: []
    };
  },
  methods: {
     
    BaiduMap() {
     
      // 百度地图API功能
      var map = new BMap.Map("allmap");
      map.centerAndZoom(new BMap.Point(121.443532, 31.24603), 13);
      map.enableScrollWheelZoom(true);

      function showPoly(pointList) {
     
        //循环显示点对象
        for (var c = 0; c < pointList.length; c++) {
     
          var marker = new BMap.Marker(pointList[c]);
          map.addOverlay(marker);
          //将途经点按顺序添加到地图上
          var label = new BMap.Label(c + 1, {
      offset: new BMap.Size(20, -10) });
          marker.setLabel(label);
        }

        var group = Math.floor(pointList.length / 29); //线路条数
        var mode = ""; //多余个数
        var remainder = pointList.length % 29;
        var calculate = remainder + group;

        //线条数 多余个数计算
        if (calculate === 29) {
     
          group += 1;
        } else if (calculate > 29) {
     
          group += 1;
          mode = calculate - 29;
        } else {
     
          mode = calculate - 1;
        }

        var driving = new BMap.DrivingRoute(map, {
     
          onSearchComplete: function(results) {
     
            if (driving.getStatus() == BMAP_STATUS_SUCCESS) {
     
              var plan = driving.getResults().getPlan(0);
              var num = plan.getNumRoutes();
              alert("plan.num ：" + num);
              for (var j = 0; j < num; j++) {
     
                var pts = plan.getRoute(j).getPath(); //通过驾车实例，获得一系列点的数组
                var polyline = new BMap.Polyline(pts);
                map.addOverlay(polyline);
              }
              searchFn();
            }
          }
        });

        //多出的一段单独进行search
        var endFn = function() {
     
          if (mode !== "") {
     
            var waypoint = pointList.slice(
              group * 28 + 1,
              pointList.length - 1
            );
            if (mode === 1) {
     
              //余数为1 途经点为空
              waypoint = [];
            }
            driving.search(
              pointList[group * 28],
              pointList[pointList.length - 1],
              {
      waypoints: waypoint }
            );
          }
        };

        var groupCopy = parseInt(group.toString());
        //整条线路递归
        var searchFn = function() {
     
          groupCopy--;
          if (groupCopy >= 0) {
     
            var i = group - groupCopy - 1;
            var waypoint = pointList.slice(i * 28 + 1, (i + 1) * 28);
            driving.search(
              pointList[i * 28],
              pointList[(i + 1) * 29 - (i + 1)],
              {
      waypoints: waypoint }
            );
          } else if (groupCopy == -1) {
     
            endFn();
          }
        };
        searchFn();
      }
      //将33个百度坐标点放入数据中
      var p1 = new BMap.Point(121.403532, 31.24603);
      var p2 = new BMap.Point(121.481477, 31.240103);
      var p3 = new BMap.Point(121.493262, 31.237015);
      var p4 = new BMap.Point(121.494987, 31.230099);
      var p5 = new BMap.Point(121.489382, 31.225034);
      var p6 = new BMap.Point(121.512953, 31.219846);
      var p7 = new BMap.Point(121.510222, 31.228122);
      var p8 = new BMap.Point(121.520715, 31.232198);
      var p9 = new BMap.Point(121.515828, 31.239485);
      var p10 = new BMap.Point(121.498724, 31.238868);
      var p11 = new BMap.Point(121.496568, 31.227505);
      var p12 = new BMap.Point(121.479177, 31.244178);
      var p13 = new BMap.Point(121.496712, 31.249365);
      var p14 = new BMap.Point(121.503323, 31.260972);
      var p15 = new BMap.Point(121.512953, 31.276158);
      var p16 = new BMap.Point(121.481764, 31.26838);
      var p17 = new BMap.Point(121.464804, 31.285293);
      var p18 = new BMap.Point(121.468685, 31.251587);
      var p19 = new BMap.Point(121.47041, 31.245289);
      var p20 = new BMap.Point(121.489094, 31.19106);
      var p21 = new BMap.Point(121.514534, 31.207987);
      var p22 = new BMap.Point(121.525314, 31.178208);
      var p23 = new BMap.Point(121.530363, 31.160422);
      var p24 = new BMap.Point(121.533363, 31.159422);
      var p25 = new BMap.Point(121.545005, 31.203169);
      var p26 = new BMap.Point(121.562252, 31.186364);
      var p27 = new BMap.Point(121.569295, 31.170422);
      var p28 = new BMap.Point(121.575907, 31.15559);
      var p29 = new BMap.Point(121.585907, 31.14559);
      var p30 = new BMap.Point(121.595907, 31.13559);
      var p31 = new BMap.Point(121.590007, 31.12559);
      var p32 = new BMap.Point(121.605907, 31.11559);
      var p33 = new BMap.Point(121.615907, 31.10559);

      this.arrayList.push(p1);
      this.arrayList.push(p2);
      this.arrayList.push(p3);
      this.arrayList.push(p4);
      this.arrayList.push(p5);
      this.arrayList.push(p6);
      this.arrayList.push(p7);
      this.arrayList.push(p8);
      this.arrayList.push(p9);
      this.arrayList.push(p10);
      this.arrayList.push(p11);
      this.arrayList.push(p12);
      this.arrayList.push(p13);
      this.arrayList.push(p14);
      this.arrayList.push(p15);
      this.arrayList.push(p16);
      this.arrayList.push(p17);
      this.arrayList.push(p18);
      this.arrayList.push(p19);
      this.arrayList.push(p20);
      this.arrayList.push(p21);
      this.arrayList.push(p22);
      this.arrayList.push(p23);
      this.arrayList.push(p24);
      this.arrayList.push(p25);
      this.arrayList.push(p26);
      this.arrayList.push(p27);
      this.arrayList.push(p28);
      this.arrayList.push(p29);
      this.arrayList.push(p30);
      this.arrayList.push(p31);
      this.arrayList.push(p32);
      this.arrayList.push(p33);

      //显示轨迹

      showPoly(this.arrayList);
    }
  },
  mounted() {
     
    this.BaiduMap();
  }
};
</script>

<style>
body,
html,
#allmap {
     
  width: 100%;
  height: 1200px;
  overflow: hidden;
  margin: 0;
  font-family: "微软雅黑";
}
</style>