百度地图 标记路线 路线连线 点击masker 弹框出信息

还有一种是别人的 连接

下方是我自己写的

<template>
  <div>
    <div id="allmap"></div>
    <div :class="{popUpBox:popUpBoxBool}">
      <p>公司名称: &nbsp; <span>{{companyname}}</span></p>
      <p>姓名:  &nbsp; <span>{{username}}</span></p>
      <p>电话:  &nbsp; <span>{{userphone}}</span></p>
      <div @click="close" class="close">关闭</div>
    </div>
  </div>
</template>

<script>
export default {
  props:['LuXianYuLanArr'],
  data() {
    return {
      companyname:'',
      username:'',
      userphone:'',
      popUpBoxBool:false,
      arrayList: [],
      jingWeiDu:[],
      markerArr:[]
    };
  },
  methods: {
    close(){
      this.popUpBoxBool = false;
    },
    BaiduMap() {
      var that = this;
      console.log(that.LuXianYuLanArr);
      // 百度地图API功能
      var map = new BMap.Map("allmap");
      map.centerAndZoom(new BMap.Point(Number(that.LuXianYuLanArr[0].lng),Number(that.LuXianYuLanArr[0].lat)), 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);
          that.markerArr.push(marker)
        }
        for(var i=0;i<that.markerArr.length;i++){
            (function(i){
                that.markerArr[i].onclick=function(){
                    that.popUpBoxBool = true ;
                    that.companyname  = that.LuXianYuLanArr[i].companyname;
                    that.username  = that.LuXianYuLanArr[i].username;
                    that.userphone  = that.LuXianYuLanArr[i].userphone;
                };
            })(i);
         }
        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();
              console.log("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();
      }

      for(let i=0;i<that.LuXianYuLanArr.length;i++){
        var s='p'+i;
        var s=new BMap.Point(that.LuXianYuLanArr[i].lng,that.LuXianYuLanArr[i].lat);
        that.jingWeiDu.push(s)
      }
      that.jingWeiDu=JSON.parse(JSON.stringify(that.jingWeiDu))
      for(let i=0;i<that.jingWeiDu.length;i++){
        var ss='p'+i;
        var ss=new BMap.Point(that.jingWeiDu[i].lng,that.jingWeiDu[i].lat);
        that.arrayList.push(ss)
      }
      showPoly(that.arrayList);
    }
  },
  mounted() {
    this.BaiduMap();
    
  }
};
</script>

<style scoped>
body,
html,
#allmap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  font-family: "微软雅黑";
}
.popUpBox{
  width: 500px;
  height: 300px;
  border:1px solid #ccc;
  border-radius: 15px;
  padding:35px;
  background: rgba(255, 255, 255, 0.9);
  position: absolute;
  left: 1000px;
  top:300px;
  font-size: 20px;
}
span{
  color:  #ee1133;
  font-weight: 700;
}
.close{
  width: 200px;
  height: 50px;
  background: #ee1133;
  border-radius: 10px;
  color: #fff;
  font-size:22px;
  text-align: center;
  line-height: 50px;
  margin: 0.5rem  auto 0;
  cursor: pointer;
}
</style>