utils-＞plugin-＞百度初始化对象

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

<script>
var timer;
var map = "";
export default {
  filters: {},
  props: {},
  data() {
    return {
      type: 0,
    };
  },
  watch: {},
  created() {},
  mounted() {
    var _this = this;
    if (BMap && BMap.Map) {
      _this.initMap("mapRoot");
    }
  },
  beforeDestroy() {
    if (timer) {
      //定时器存在则清除
      clearTimeout(timer);
    }
  },
  methods: {
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    //                               页面登入的数据请求和渲染实体函数
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    initMap(root) {
      map = new BMap.Map(root, {
        enableBizAuthLogo: false,
        mapType: BMAP_HYBRID_MAP,
      }); // 创建Map实例

      var mapStyle = {
        style: "midnight",
      };
      map.setMapStyle(mapStyle);

      //添加地图类型控件
      map.addControl(
        new BMap.MapTypeControl({
          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
        })
      );
      map.setCurrentCity("杭州"); // 设置地图显示的城市 此项是必须设置的
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      var point = new BMap.Point(120.15, 30.28);
      map.centerAndZoom(point, 21);

      map.enableScrollWheelZoom(true);
      map.enableDoubleClickZoom(true);
      this.$emit("initfun");
    },
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    //                               事件函数
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    /*
    根据点位数组，添加点位
    点位数组示例如下
    markerArr.push({
      // 地图信息
      highlight: typeId ? true : false,
      point: value.longitude + "|" + value.latitude,
      icon: {
        // icon高宽
        w: 26, 
        h: 33, 
        //icon偏移量
        l: 0, 
        t: 0, 
        // label偏移量
        x: 0, 
        lb: 0 },
      isOpen: 0,
      // 地图信息加点击框信息
      title: value.name,
      // 点击框信息
      address: value.address,
      phone: value.phone,

      imageUrl: value.imageUrl,
      description: value.description,
      // 点击事件参数
      id: value.id
    });
    */
    addMarker(markerArr, user_defined) {
      var _this = this;
      window.lastInfoBox = null;
      for (var i = 0; i < markerArr.length; i++) {
        var json = markerArr[i];
        var p0 = json.point.split("|")[0];
        var p1 = json.point.split("|")[1];
        // 1，创建点位对象
        var point = new BMap.Point(p0, p1);
        // 2，为点位对象添加icon
        var iconImg = _this.createIcon(
          json.iconUrl,
          json.icon,

          json.highlight
        );
        var marker = new BMap.Marker(point, {
          icon: iconImg,
        });
        // 3，为点位对象添加label标题栏
        var label = new BMap.Label(json.title + "", {
          offset: new BMap.Size(json.icon.lb - json.icon.x + 10, -20),
        });

        label.setStyle({
          // borderColor: "#808080",
          border: "0",
          color: "#fff",
          cursor: "pointer",
          backgroundColor: "transparent",
        });
        marker.setLabel(label);
        // 4，将标注添加到地图中
        map.addOverlay(marker);

        (function () {
          const json = markerArr[i]; //i很关键，直接写json会被覆盖
          const _iw = _this.createInfoWindow(
            json,
            user_defined ? user_defined : false
          );
          const _marker = marker;
          // 点位点击事件，将弹窗添加进入地图
          _marker.addEventListener("click", function (e) {
            if (!user_defined) {
              _marker.openInfoWindow(_iw);
            } else {
              _this.$emit("clickfun0", json.title);
              if (lastInfoBox) {
                //判断上一个窗体是否存在，若存在则执行close
                lastInfoBox.close();
              }
              lastInfoBox = _iw;
              _iw.open(_marker);
              if (json.wholeValue.deviceInfo) {
                document.getElementById("lookcloudback").onclick = function (
                  e
                ) {
                  _this.$emit("clickfun1", json.wholeValue);
                };
                document.getElementById("looklive").onclick = function (e) {
                  _this.$emit("clickfun2", json.wholeValue);
                };
              }
            }
          });
          label.addEventListener("click", function (e) {});
          // 弹窗事件
          if (!user_defined) {
            _iw.addEventListener("open", function () {
              _marker.getLabel().hide();
            });
            _iw.addEventListener("close", function () {
              _marker.getLabel().show();
            });
          } else {
            _iw.addEventListener("open", function () {});
            _iw.addEventListener("close", function () {});
          }
          // 设定这个弹窗是否初始
          if (!!json.isOpen) {
            label.hide();
            _marker.openInfoWindow(_iw);
          }
        })();
      }
    },
    /*
    创建一个Icon高亮处理highlight
    iconUrl--icon的来源
    iconjson--icon的属性
    highlight--是否高亮显示
    */

    createIcon(iconUrl, iconjson, highlight) {
      if (highlight) {
        var icon = new BMap.Icon(
          iconUrl ? iconUrl : require(`./assets//pinkIcon.png`),
          new BMap.Size(iconjson.w + 9, iconjson.h + 2),
          {
            imageOffset: new BMap.Size(-iconjson.l, -iconjson.t),
          }
        );
      } else {
        var icon = new BMap.Icon(
          iconUrl ? iconUrl : require(`./assets//blueIcon.png`),
          new BMap.Size(iconjson.w, iconjson.h),
          {
            imageOffset: new BMap.Size(-iconjson.l, -iconjson.t),
          }
        );
      }
      return icon;
    },

    //创建InfoWindow
    createInfoWindow(json, user_defined) {
      var iw;
      let _this = this;

      if (!user_defined) {
        let html = `
    <div class="bmap_normal"></div>
<b class="iw_poi_title flexRow" style="padding-top:10px;" title="${
          json.title
        }"><div class="left">标点名称:</div> <div class="right overflow-ellipsis">${
          json.title
        }</div></b> 
<div class="iw_poi_content flexRow">
    <div class="left">地址:</div>
    <div class="right overflow-ellipsis">${
      json.address ? json.address : "暂无"
    }</div>
</div>
<div class="iw_poi_content flexRow">
    <div class="left">联系电话:</div>
    <div class="right">${json.phone ? json.phone : 0}</div>
</div>
<div class="iw_poi_content flexRow" style="align-items: flex-start;">
    <div class="left">场所图片:</div>
    <div class="right">${json.imageUrl ? "暂无" : "暂无图片"}
        <img style="display:${json.imageUrl ? " block " : "none "};" src="${
          json.imageUrl
        }" />
    </div>
</div>
<div class="iw_poi_content flexRow">
    <div class="left">主打业务:</div>
    <div class="right overflow-ellipsis">${json.description}</div>
</div>`;
        let opts = {
          width: 390, // 信息窗口宽度
          height: json.imageUrl ? 310 : 180, // 信息窗口高度
          title: "", // 信息窗口标题
        };
        iw = new BMap.InfoWindow(html, opts);
      } else {
        let html = `
<div class="infoBox_content angle-wrapper"> 
  <b class="iw_poi_title flexRow" style="" title="${
    json.title
  }"> <div class="left overflow-ellipsis">${json.title}
    </div>
    <div class="wave flexRow">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    
    </b> 
    <div class="baseinfo">基础信息</div>
  <div class="iw_poi_content flexRow">
      <div class="left">地址:</div>
      <div class="right overflow-ellipsis">${json.address}</div>
  </div>
  <div class="iw_poi_content flexRow">
      <div class="left">联系电话:</div>
      <div class="right">${json.phone ? json.phone : 0}</div>
  </div>
  
  <div class="iw_poi_content flexRow" style="${
    json.description ? "" : "display:none;"
  }">
      <div class="left">主营业务:</div>
      <div class="right overflow-ellipsis">${json.description}</div>
  </div>
  <div class="iw_poi_content flexRow" style="align-items: flex-start;${
    json.imageUrl ? "" : "display:none;"
  }" >
      <div class="left">场所图片:</div>
      <div class="right">${json.imageUrl ? "" : "暂无图片"}
          <img style="display:${json.imageUrl ? " block " : "none "};" src="${
          json.imageUrl
        }" />
      </div>
  </div>
  <div class="btmLine flexRow" style="${
    json.wholeValue.deviceInfo ? "" : "display:none;"
  }">
        <div class='btm' id="lookcloudback">七天云回看</div>
        <div  class='btm' id="looklive">查看历史视频</div>
  </div>

</div>
      `;
        let opts = {
          boxStyle: {
            width: "435px",
            height: "233px",
          },
          closeIconMargin: "10px 10px 0px 0px",
          closeIconUrl: require("./assets//cancle.png"),
          enableAutoPan: false,

          align: INFOBOX_AT_BOTTOM, //{Number} 基于哪个位置进行定位，取值为[INFOBOX_AT_TOP,INFOBOX_AT_BOTTOM]
          offset: new BMap.Size(10, 30), //{Size} infoBox的偏移量,只能做y上偏移
        };
        iw = new BMapLib.InfoBox(map, html, opts);
        iw.enableAutoPan(); //自动偏移
        iw.uid = "2"; //标识
      }

      return iw;
    },
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    //                               工具函数
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    deleteAllMarker() {
      var allOverlay = map.getOverlays();
      for (var i = 0; i < allOverlay.length; i++) {
        if (allOverlay[i].toString() == "[object Marker]") {
          map.removeOverlay(allOverlay[i]);
        }
      }
    },
    transCenterPoint(lon, lat) {
      map.centerAndZoom(new BMap.Point(lon, lat), 19);
    },
  },
};
</script>
<style lang="scss" src="./bmap.scss"></style>

/* 本文件专为百度地图样式设计 */
#mapRoot {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  font-family: "微软雅黑";
  position:fixed;
  // height:calc(92.5vh - 316px);
  // overflow: hidden;
  // margin: 0;
  // font-family: "微软雅黑";
  // top: 7.5vh;
  // left: 500px;
  // position:fixed;
}
// 自带样式模式------------------------------------------------------------------------------------------
/* 地图弹窗样式 */
.bmap_normal{
  .iw_poi_title {}

  .iw_poi_title,
  .iw_poi_content {
    padding-bottom: 10px;
    align-items: center;
  }
  
  .iw_poi_title .left,
  .iw_poi_content .left {
    min-width: 80px;
    font-size: 14px;
  
  
  }
  
  .iw_poi_title .right,
  .iw_poi_content .right {
    flex: 1;
  }
  
  .iw_poi_content .right img {
    width: 100%;
    height: 150px;
  }
  
  /* 隐藏百度地图左下角和右上角标记, */
  .anchorBL,
  .anchorTR {
    display: none;
  }
}

// 自定义样式模式------------------------------------------------------------------------------------------


.infoBox{
  border-radius: 5px;
  
  &>img{
    height: 20px ;
    width: 20px;
  }
  

  .infoBox_content{
    // background: url(../assets/bashboard/case1.png)  no-repeat ;
     // background-size: 100% 100%;
    background-color: #09172a;
    padding: 10px 15px 10px;
    border-radius: 5px;
    color: white;
  }
  .iw_poi_title{
    font-size: 16px;
    .left{
      margin-right: 7px;
    }
  }
  .wave{
    align-items: center;
  }
  .wave>div{
    width: 5px;
    height: 10px;
    transform: skewX(-30deg);
    background: white;
    margin-right: 3px;
  }
  .baseinfo{
    font-size: 15px;
    font-weight: 600;
    padding-top: 15px;
    margin-bottom: 4px;
  }
  .iw_poi_content{
    margin-bottom: 7px;
    font-size: 13px;
    .left{
      flex-basis: 80px;
     
    }
    .right{
      flex: 1;
      img{
        width: 100%;
    height: 150px;
      }
    }
  }

}
.btmLine{
  padding-left: 20px;
  padding: 15px 20px 10px;
  .btm{
    height: 26px;
    line-height: 26px;
    width: 120px ;
    background-color: #00FFFF;
    color: black;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    
  }
  .btm:not(:last-child){
    margin-right: 15px;
  }
}
// CSS为div添加尖角样式
.angle-wrapper:after {
  content: "";
  width: 0;
  height: 0;
  border: 18px solid transparent;
  border-bottom-color: #09172a;
  position: absolute;
  left:50%;
  top: -12px;
  transform: translate(-50%,0);
  margin-top: -18px;
}