百度地图得引用 循环打印坐标

    map () {
      let that = this;
      //创建Map实例
      var map = new BMap.Map("XSDFXPage");
      // 初始化地图,设置中心点坐标
      var point = new BMap.Point(121.160724, 31.173277); // 创建点坐标
      //添加鼠标滚动缩放
      map.enableScrollWheelZoom();
      map.centerAndZoom("上海市静安区", 15);
      //设置标注的图标
      //var icon = new BMap.Icon("./assets/images/visualization/fwqq.png",new BMap.Size(100,100));
      //设置标注的经纬度
      // var marker = new BMap.Marker(new BMap.Point(121.160724,31.173277),{icon:icon});

      //把标注添加到地图上
      // var marker = new BMap.Marker(new BMap.Point(121.160724,31.173277));
      // map.addOverlay(marker);
      var _this = this;

      for (var i = 0; i < _this.datalist.length; i++) {
        (function (i) {
          var point = new BMap.Point(
            _this.datalist[i].longitude,
            _this.datalist[i].latitude
          );
          // 创建文本标注对象
          var labelopts = {
            position: point, // 指定文本标注所在的地理位置
            offset: new BMap.Size(0, 0), // 设置文本偏移量
          };
          if (that.params.category == "01") {
            var message =
              _this.datalist[i].deptName +
              " " +
              _this.datalist[i].count +
              " " +
              _this.datalist[i].type;
          } else {
            var message = _this.datalist[i].deptName;
          }
          var label = new BMap.Label(message, labelopts);
          label.setStyle({
            color: "#00f7fa",
            backgroundColor: "#3d639b",
            borderRadius: ".1rem",
            fontWeight: "700",
            fontSize: ".225rem",
            padding: ".1rem",
            border: "0",
            height: ".5rempx",
            lineHeight: ".4rem",
            transform: "translateX(-50%)",
          });
          var marker = new BMap.Marker(point);
          map.addOverlay(label);
          map.addOverlay(marker);
          var opts = {
            width: 0,
            height: 0,
            title: "部门:" + _this.datalist[i].deptName,
            panel: "panel", //检索结果面板
            enableAutoPan: true, //自动平移
            backgroundColor: "#000000",
          };
          //服务请求
          if (that.params.category == "01") {
            var cons = "";
            _this.datalist[i].rows.map(function (val) {
              var content = `
              <div  style="margin-bottom: 35px;color:#fff;position: relative;">
              <p>内容:&nbsp;${val.reqDescribe}</p>
              <p>时间:&nbsp;${val.submitTime}</p><p>状态:${val.reqStatusCn}</p>
              <div style="flaot:right;cursor: pointer;margin: 10Px;font-family: MicrosoftYaHei;line-height:18Px;float:right;color: white;background-color: #6985b000"; class="markerbtn" data-status="${val.reqStatus}" data-val="${val}"  data-sid="${val.eveId}"  >详情></div>
              </div>
            `;
              cons += content;
            });
          }
          //节点监控
          if (that.params.category == "02") {
            var cons = "";
            _this.datalist[i].rows.map(function (val) {
              var content = `
               <div style="margin-bottom: 35px;color:#fff;position: relative;">
              <p>运维负责人:&nbsp;${val.userName}</p>
             <p>联系方式:&nbsp;${val.userPhone}</p> 
             <p> 节点性质:${val.nodePropertyLabel}</p>
            <div style="cursor: pointer;color: white;background-color: #6985b000"; class="markerbtn ys" data-sid="${val.id}">详情</div>
            </div>
            `;
              cons += content;
            });
          }
          //机房
          if (that.params.category == "04") {
            var cons = "";
            _this.datalist[i].rows.map(function (val) {
              var content = `<div  style="color:#fff;"><span>机房面积:&nbsp;${val.equipArea}
            </span><span>机房功率:&nbsp;${val.equipPower}<br/>机房地址:${val.equipAddress}</span>
            <div style="cursor: pointer;color: white;background-color: #6985b000";  class="markerbtn ys" data-sid="${val.id}">详情</div>
            </div>
            `;
              cons += content;
            });
          }
          var infowindow = new BMap.InfoWindow(cons, opts);
          var xx = new BMap.InfoWindow(cons, opts);
          marker.addEventListener("click", function () {
            map.openInfoWindow(infowindow, point);
          });

          if (!infowindow.isOpen()) {
            //如果没有打开，则监听打开事件，获取按钮，添加事件
            infowindow.addEventListener("open", function () {
              var btn = document.getElementsByClassName("markerbtn");
              for (var i = 0; i < btn.length; i++) {
                btn[i].onclick = function (e) {
                  // 通过js实现div隐藏
                  console.log(e.target.dataset);
                  if (that.params.category == "01") {
                    let routeData = that.$router.resolve({
                      path: "/yunwei/event/event/carryout",
                      query: {
                        id: e.target.dataset.sid,
                      },
                    });
                    //必要操作，否则不会打开新页面
                    window.open(routeData.href, "_blank");
                  } else if (that.params.category == "02") {
                    let routeData = that.$router.resolve({
                      path: "/resource/node",
                      query: {
                        id: e.target.dataset.sid,
                      },
                    });
                    //必要操作，否则不会打开新页面
                    window.open(routeData.href, "_blank");
                  } else if (that.params.category == "04") {
                    let routeData = that.$router.resolve({
                      path: "/resource/room",
                      query: {
                        id: e.target.dataset.sid,
                      },
                    });
                    //必要操作，否则不会打开新页面
                    window.open(routeData.href, "_blank");
                  }
                };
              }
            });
          } else {
            //如果已经打开，直接获取按钮，添加事件
            document.getElementById("markerbtn").onclick = function (e) {
              console.log(e.target.dataset.sid);
              console.log(e.target.dataset.status);
            };
          }
        })(i);
      }
      let colour = "";
      var pois = new Array();
      if (_this.links != undefined) {
        for (var i = 0; i < _this.links.length; i++) {
          (function (i) {
            let pois = [];
            _this.links[i].forEach(function (item, index, arr) {
              //创建标注

              colour = item.colour;
              var point = new BMap.Point(item.longitude, item.latitude);
              var icon = new BMap.Icon(
                "http://10.210.236.14/static/img/" + item.url,
                new BMap.Size(60, 60),
                {
                  //是引用图标的名字以及大小，注意大小要一样
                  anchor: new BMap.Size(-10, 20), //这句表示图片相对于所加的点的位置
                }
              );
              var marker = new BMap.Marker(point, {
                icon: icon,
              });
              //存储点
              pois.push(point);
              //设置放大级别，范围1-20
              map.centerAndZoom(point, 10);
              //添加覆盖物
              map.addOverlay(marker);
            })

            var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
              scale: 0.6,//图标缩放大小
              strokeColor: '#fff',//设置矢量图标的线填充颜色
              strokeWeight: 1,//设置线宽          
            });
            var icons = new BMap.IconSequence(sy, '100%', '10%', false);


            //  创建两点间的折线
            var polyline = new BMap.Polyline([...pois], {
              strokeColor: colour,
              strokeWeight: 6,
              strokeOpacity: 0.9,
              icons: [icons]
            });


            polyline.addEventListener("click", function (e) {
              var opts = {
                width: 300,     // 信息窗口宽度
                height: 200,     // 信息窗口高度
                title: '详情', // 信息窗口标题
                enableMessage: true//设置允许信息窗发送短息
              };
              var point = new BMap.Point(e.point.lng, e.point.lat);
              var infoWindow = new BMap.InfoWindow("<span>链路名称:</span>" + _this.links[i][0].linkName + "<br><span>丢包率:</span>" + _this.links[i][0].packetLossRatio + "<br><span>时延:</span>" + _this.links[i][0].delay + "<br><span>抖动:</span>" + _this.links[i][0].delay + "<br><span>带宽:</span>" + _this.links[i][0].bandwidth, opts);  // 创建信息窗口对象 
              map.openInfoWindow(infoWindow, point); //开启信息窗口
            });
            //添加折线
            map.addOverlay(polyline);
          })(i);
        }
      }

      var bdary = new BMap.Boundary();
      bdary.get("上海市静安区", function (rs) {
        //map.clearOverlays();//清除地图覆盖物
        //思路:利用行政区划点的集合与外围自定义东南西北形成一个环形遮罩层
        //1.获取选中行政区划边框点的集合rs.boundaries[0]
        var strs = new Array();
        strs = rs.boundaries[0].split(";");
        var ENWS = "";
        for (var i = 0; i < strs.length; i++) {
          ENWS += strs[i] + ";";
        }
        //2.自定义外围边框点的集合
        var E_JW = "170.672126, 39.623555;"; //东
        var EN_JW = "170.672126, 81.291804;"; //东北角
        var N_JW = "105.913641, 81.291804;"; //北
        var NW_JW = "-169.604276,  81.291804;"; //西北角
        var W_JW = "-169.604276, 38.244136;"; //西
        var WS_JW = "-169.604276, -68.045308;"; //西南角
        var S_JW = "114.15563, -68.045308;"; //南
        var SE_JW = "170.672126, -68.045308 ;"; //东南角
        //3.添加环形遮罩层
        var ply1 = new BMap.Polygon(
          ENWS +
          E_JW +
          SE_JW +
          S_JW +
          WS_JW +
          W_JW +
          NW_JW +
          N_JW +
          EN_JW +
          E_JW,
          {
            strokeColor: "none",
            strokeOpacity: 0,
            fillColor: "#041e3f",
            fillOpacity: "0.2",
          }
        ); //建立多边形覆盖物
        map.addOverlay(ply1); //遮罩物是半透明的，如果需要纯色可以多添加几层
        //4. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层
        var ply = new BMap.Polygon(rs.boundaries[0], {
          strokeWeight: 2,
          strokeColor: "#002afc",
          fillColor: "",
        });
        map.addOverlay(ply);
        map.setViewport(ply.getPath()); //调整视野
      });
    },