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

ゝ一纸荒年。 2023-07-19 10:39 10阅读 0赞

还有一种是别人的 [连接][Link 1]

下方是我自己写的

<template>
      <div>
        <div id="allmap"></div>
        <div :class="{popUpBox:popUpBoxBool}">
          <p>公司名称:   <span>{ { companyname}}</span></p>
          <p>姓名:    <span>{ { username}}</span></p>
          <p>电话:    <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>

[Link 1]: https://blog.csdn.net/u011798443/article/details/80181782