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

绝地灬酷狼 2023-07-18 12:44 6阅读 0赞

<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>