百度地图 标注文字 名称 区域

<template>
  <div>
    <div class="map">
      <!-- <div style="position:ablouse; top:500px;width:300px;border:1px solid red; margin:0 auto">
       <el-input v-model="xx"></el-input>
      </div>-->
      <baidu-map
        :center="mapCenter"
        :zoom="zoom"
        style="height: 100%"
        :map-click="false"
        :scroll-wheel-zoom="true"
        @ready="handler"
      >
        <bm-boundary
          v-for="(item, index) in shanghai"
          :key="index+'qy'"
          :name="item"
          :strokeWeight="2"
          strokeColor="blue"
          fillColor="blue"
          :fillOpacity="0.1"
        ></bm-boundary>

        <!-- 小区撒点 聚合开始 用默认图标  -->
        <!-- 没有维护工单小区开始 size="BMAP_POINT_SIZE_SMALL" -->
        <bm-point-collection
          :points="noWorkOrderHome"
          size="BMAP_POINT_SIZE_BIG"
          color="#1352c7"
          @mouseover="mouseover"
          @mouseout="mouseout"
          @click="handleHome"
        ></bm-point-collection>
        <!-- 没有维护工单小区结束  -->

        <!-- 有维护工单小区开始 蓝色图标 -->
        <bm-marker
          v-for="(marker1, index1) in hasWorkOrderHome"
          :key="index1"
          :position="{ lng: marker1.longitude, lat: marker1.latitude }"
          :icon="{
                url: marker1.imgSrc,
                size: { width: marker1.imgSize[0], height: marker1.imgSize[1] },
        }"
          @mouseover="mouseoverPoint(marker1)"
          @mouseout="mouseout"
          @click="lookDetail(marker1,index1,'xiaoqu')"
        ></bm-marker>
        <!-- 有维护工单小区结束 蓝色图标-->
        <div v-if="lableObj && lableObj.lat && lableObj.lng">
          <bm-label
            v-if="lableObj && lableObj.lat && lableObj.lng"
            :content="lableObj.aliasname"
            :position="lableObj"
            :offset=" lableObj.user_name && lableObj.user_name.length>1 ?{ width: -20, height: -20 }:{ width: -50, height: -40 }"
            :labelStyle="{color: 'white', fontSize : '1rem',background: '#080c48',borderRadius: '3px',borderColor:'blue',padding:'3px'}"
          />
        </div>
        <!-- 小区撒点 聚合结束 -->
        <!-- 维护人员撒点 聚合 用自定义图标 开始-->
        <bm-marker
          v-for="(marker2, index2) in manData"
          :key="marker2.id"
          :position="{ lng: marker2.lng, lat: marker2.lat }"
          :icon="{
                url: marker2.imgSrc,
                size: { width: marker2.imgSize[0], height: marker2.imgSize[1] },
        }"
          @mouseover="mouseoverPoint(marker2,'reyuan')"
          @mouseout="mouseout"
          @click="lookDetail(marker2,index2,'reyuan')"
        ></bm-marker>
        <!-- 维护人员撒点 聚合 用自定义图标 结束-->

        <!-- bim开始 -->
        <bm-marker
          v-for="(marker3, index3) in bimData"
          :key="marker3.id"
          :position="{ lng: marker3.longitude, lat: marker3.latitude }"
          :icon="{
                url: marker3.imgSrc,
                size: { width: marker3.imgSize[0], height: marker3.imgSize[1] },
        }"
          @mouseover="mouseoverPoint(marker3)"
          @mouseout="mouseout"
          @click="lookDetail(marker3,index3,'bim')"
        ></bm-marker>
        <!-- bim结束 -->

        <bm-info-window
          v-if="infoWindowInfo"
          :title="title"
          :position="{
                lng: infoWindowInfo.lng,
                lat: infoWindowInfo.lat,
              }"
          :show="infoWindowInfo.showFlag"
          @open="infoWindowOpen"
          @close="infoWindowClose"
        >
          <!-- //  -->
          <div class="pop_window" v-if="title === '维护人员'">
            <div v-html="infoWindowInfo.obj.contentHTML"></div>
          </div>
        </bm-info-window>

        <!-- :animation="animation" -->
        <div v-if="routerLineData.length>0 && hasWorkOrderHome.length>0">
          <bm-driving
            v-for="line in routerLineData"
            :key="line.id"
            :start="line.start"
            :end="line.end"
            startCity="上海"
            endCity="上海"
          ></bm-driving>
        </div>
      </baidu-map>
      <!-- 地图右下按钮 -->
    </div>
    <div class="bott">
      <div @click="handleTab(1)">
        <img v-if="tab===1 && tab1" src="../../../assets/imgs/b1.png" alt />
        <img v-else src="../../../assets/imgs/b2.png" alt />
      </div>
      <div @click="handleTab(2)">
        <img v-if="tab===2 && tab2" src="../../../assets/imgs/w1.png" alt />
        <img v-else src="../../../assets/imgs/w2.png" alt />
      </div>
    </div>

    <!-- bim模型弹窗开始 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      class="animate__zoomIn"
      @close="closeDialog"
    >
      <iframe v-if="dialogVisible" :src="bimUrl" class="el-dialog-url"></iframe>
    </el-dialog>
    <!-- bim模型弹窗结束 -->
  </div>
</template>
 
<script>
// //局部注册   百度地图
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import {
  BmlMarkerClusterer,
  BmDriving,
  BmBoundary,
  BMapLibGroundOverlay,
  BmLabel
} from "vue-baidu-map";
// 引入marker
import BmMarker from "vue-baidu-map/components/overlays/Marker";
const styleJson = require("@/assets/map/custom_map_config.json");
import {
  getHouseLocation,
  getAllMaintainer,
  getBimList,
  getBimUrl
} from "@/api/user";
export default {
  name: "MidMap",
  components: {
    BaiduMap,
    BmlMarkerClusterer,
    BmMarker,
    BmDriving,
    BMapLibGroundOverlay,
    BmBoundary,
    BmLabel
    // bimDialog
  },
  // mixins: [GlobalMixin],
  props: {
    // mapCenter: {
    //   type: Object,
    //   default: () => {}
    // },
    type: {
      type: String,
      default: ""
    },
    midMapStr: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      // xx:'',
      // 新加开始
      tab: 0, //1BIM  2维护人员
      tab1: false,
      tab2: false,
      // bounds: [
      //   { lng: 123.247756, lat: 23.378111 }, // 左下角
      //   { lng: 124.498772, lat: 38.58128 }, // 右下角
      //   { lng: 130.073153, lat: 42.807915 }
      // ], // 左上角], // 上海以外区域的边界坐标
      bounds: {
        ne: { lng: 123.247756, lat: 23.378111 },
        sw: { lng: 124.498772, lat: 38.58128 }
      },
      // grayImageUrl: require("../../../assets/imgs/qiu/map.png"), // 灰色图片的路径
      // grayImageUrl: "../../../assets/imgs/qiu/map.png", // 灰色图片的路径
      lableObj: null,
      markers: [], //报错的所有小区点
      noWorkOrderHome: [], // 没有维护工单的小区,
      hasWorkOrderHome: [], // 有维护工单的小区
      noWorkOrderHomeStr: "", //保存没有维护工单的小区
      hasWorkOrderHomeStr: "", //保存有维护工单的小区数据
      manData: [], //维护人员
      bimData: [], // bim撒点 , ,
      mapCenter: { lng: 120.375298, lat: 31.293327 }, //120.290734,31.121817   120.614277,31.234036
      zoom: 11,
      title: "",
      infoWindowInfo: null,
      routerLineData: [],
      bimUrl: "", //bim嵌套地址
      // 新加结束
      timer: null,
      dialogVisible: false,
      bimState: true,

      shanghai: [
        "上海市黄浦区",
        "上海市徐汇区",
        "上海市长宁区",
        "上海市静安区",
        "上海市普陀区",
        "上海市虹口区",
        "上海市杨浦区",
        "上海市闵行区",
        "上海市宝山区",
        "上海市嘉定区",
        "上海市浦东新区",
        "上海市金山区",
        "上海市松江区",
        "上海市青浦区",
        "上海市奉贤区",
        "上海市崇明"
      ],

      //维护人员 正在维护的小区 路线
      //标注区域
      dataArr: [
        {
          name: "崇明区",
          cp: [121.595364, 31.616173]
        },
        {
          name: "徐汇区",
          cp: [121.4575838060745, 31.201025530928792]
        },
        {
          name: "浦东新区",
          cp: [121.84155551325946, 31.112025742578506]
        },
        {
          name: "松江区",
          cp: [121.16954379970203, 30.991919617073894]
        },

        {
          name: "黄浦区",
          cp: [121.496527005334, 31.208862399055633]
        },
        {
          name: "长宁区",
          cp: [121.3881627562634, 31.208407482923658]
        },
        {
          name: "静安区",
          cp: [121.46247058804877, 31.23755896039288]
        },
        {
          name: "普陀区",
          cp: [121.38327597428912, 31.28275048898831]
        },
        {
          name: "虹口区",
          cp: [121.49121636436807, 31.271392926034384]
        },
        {
          name: "杨浦区",
          cp: [121.53404757108382, 31.30003108653919]
        },
        {
          name: "闵行区",
          cp: [121.4656326234439, 31.0842887846882]
        },
        {
          name: "宝山区",
          cp: [121.40526649317337, 31.3915648120082]
        },
        {
          name: "嘉定区",
          cp: [121.20778300985982, 31.347412870040078]
        },
        {
          name: "金山区",
          cp: [121.27562304197336, 30.848706438388287]
        },
        {
          name: "青浦区",
          cp: [121.15834027459064, 31.229901400787032]
        },
        {
          name: "奉贤区",
          cp: [121.53577231766297, 30.90127404386132]
        }
      ]
    };
  },
  created() {
    this.getAllHouse();
    // this.getTableList(); // 工单列表
    // this.getMapData();
    // this.getMan();
    // this.getAllHouse();
  },

  watch: {
    midMapStr(vNew) {
      let arr = JSON.parse(vNew);
      // console.log(arr, "222222222222222222222");
      this.markers = arr;
      this.changeData();
    }
  },
  mounted() {
    // this.getMap2();
    // this.getMan();
    // this.getMapData();
    // this.startCount();
    // setTimeout(function() {
    //   this.getBoundary();
    // }, 100);
    //  setTimeout( ()=>{
    //     this.drawBoundary();
    // }, 1000)
    // this.drawBoundary();
  },
  methods: {
    // qqqqqq(e){  //点击地图 获取经纬度
    //   this.xx = e.point.lng + ',' + e.point.lat;
    // },
    closeDialog() {
      this.dialogVisible = false;
      this.$parent.handleSide();
    },
    startCount() {
      this.closeCount();
      this.timer = setTimeout(() => {
        // this.areas.push(this.areas.shift());
        // this.zoom = 17;
        // this.animation = "";
      }, 5000);
    },
    closeCount() {
      if (this.timer) {
        clearInterval(this.timer);
      }
    },

    //海量点鼠标移入
    mouseover(currentTarget, point, returnValue, target, type) {
      // console.log("mouseover", currentTarget, point, returnValue, target, type);
      this.lableObj = null;
      this.lableObj = point.point;
      // console.log("this.lableObj mouseover", this.lableObj);
    },
    mouseout() {
      this.lableObj = null;
    },
    // 点鼠标移入
    mouseoverPoint(marker, str) {
      this.lableObj = null;
      let obj = null;
      obj = Object.assign({}, marker);
      if (str === "reyuan") {
        obj.lng = obj.userLongitude;
        obj.lat = obj.userLatitude;
        obj.aliasname = obj.user_name;
      } else {
        obj.lat = obj.latitude;
        obj.lng = obj.longitude;
      }
      this.lableObj = obj;
    },

    handleTab(num) {
      this.tab = num;
      if (num === 1) {
        this.tab2 = false;
        this.tab1 = !this.tab1;
        this.noWorkOrderHome = []; // 没有维护工单的小区,
        this.hasWorkOrderHome = []; // 有维护工单的小区
        this.manData = []; //维护人员
        this.routerLineData = []; //路线
        this.bimData = []; //bim撒点
        if (this.tab1) {
          this.getBIM();
        }
      } else {
        this.tab1 = false;
        this.tab2 = !this.tab2;
        this.bimData = []; // bim撒点
        this.manData = []; //维护人员
        this.routerLineData = []; //路线
        this.changeData(this.markers);
        if (this.tab2) {
          this.getMan();
        }
      }
    },

    changeData() {
      let arr = this.markers;
      // console.log(arr, "111111111111111111111111");
      // console.log(this.type, "pppppppppppppp");
      this.noWorkOrderHome = []; // 没有维护工单的小区,
      this.hasWorkOrderHome = [];
      let noWorkOrder = []; // 没有维护工单的小区
      let hasWorkOrder = []; //有维护工单的小区
      arr.forEach((item, index) => {
        if (item.projectStatus == 1) {
          item.imgSize = [32, 32];
          item.imgSrc = require("@/assets/imgs/hong.png");
          hasWorkOrder.push(item);
        } else {
          item.lng = item.longitude;
          item.lat = item.latitude;
          noWorkOrder.push(item);
        }
      });
      this.noWorkOrderHome = noWorkOrder; // 没有维护工单的小区,
      this.hasWorkOrderHome = hasWorkOrder;
      if (this.type === "part") {
        console.log(this.type, "pppppppppppppp");
        this.zoom = 15;

        //  this. mapCenter = , //120.290734,31.121817 lat
        this.mapCenter = { lng: arr[0].lng, lat: arr[0].lat };
      } else {
        this.zoom = 11;
        // this.mapCenter = { lng: 120.384118, lat: 31.228903 }; //120.916996,31.399761
        this.mapCenter = { lng: 121.007928, lat: 31.271177 }; //121.007928,31.271177
      }
    },

    // 所有小区撒点
    getAllHouse(obj) {
      // console.log("getAllHouse77777777777777", obj);
      if (this.noWorkOrderHomeStr.length > 0) {
        this.noWorkOrderHome = JSON.parse(this.noWorkOrderHomeStr);
        this.hasWorkOrderHome = JSON.parse(this.hasWorkOrderHomeStr);
      } else {
        getHouseLocation(obj).then(res => {
          // console.log("所有小区撒点", res);
          if (res) {
            // let allHomeStr = JSON.stringify(res); //所有小区
            // this.$store.commit("setAllHomeStr", allHomeStr); //放到vuex中
            let noWorkOrder = []; // 没有维护工单的小区
            let hasWorkOrder = []; //有维护工单的小区
            res.forEach((item, index) => {
              if (item.projectStatus == 1) {
                item.imgSize = [32, 32];
                item.imgSrc = require("@/assets/imgs/hong.png");
                hasWorkOrder.push(item);
              } else {
                item.lng = item.longitude;
                item.lat = item.latitude;
                noWorkOrder.push(item);
              }
            });
            this.noWorkOrderHome = noWorkOrder; // 没有维护工单的小区,
            this.hasWorkOrderHome = hasWorkOrder;
            this.noWorkOrderHomeStr = JSON.stringify(noWorkOrder);
            this.hasWorkOrderHomeStr = JSON.stringify(hasWorkOrder);
          }
        });
      }
    },

    //所有维护人员
    getMan() {
      getAllMaintainer().then(res => {
        // console.log("维护人员", res);
        let arr = res;
        let self = this;
        arr.forEach(item => {
          item.lng = item.userLongitude;
          item.lat = item.userLatitude;
          item.obj = {};
          item.obj.labelName = item.user_name;
          // item.obj.titleText = "维护人员";
          // item.obj.titleText = "维护人员";
          item.imgSize = [152, 169];
          item.obj.contentHTML = `<div>
            ${self.textShowFun("姓 名", item.user_name)}
            ${self.textShowFun("手 机", item.phoneNumber)}
            ${self.textShowFun("项目名称", item.projectName)}
            ${self.textShowFun("项目地址", item.projectAddress)}
            ${self.textShowFun("工单类型", item.workOrderType)}
            ${self.textShowFun("问题描述", item.remark)}</div>`;
          //维护人员 正在维护的小区
          if (item.status === "1") {
            item.imgSrc = require("@/assets/img/gongren-red.png");
          } else {
            item.imgSrc = require("@/assets/img/gongren-blue.png");
          }
        });
        this.manData = arr;
        let lineData = [];
        let arr0 = Object.assign([], arr);
        arr0.forEach((item, index) => {
          let obj = {
            id: index + "lx",
            start: {
              lng: item.userLongitude,
              lat: item.userLatitude
            },
            end: { lng: item.orderLongitude, lat: item.orderLatitude }
          };
          lineData.push(obj);
        });
        this.routerLineData = lineData;
        // console.log("维护人lineData员00xxx", lineData);
        // console.log("维manData护人员xxx", this.manData);
      });
    },

    // 所有bim
    getBIM() {
      getBimList().then(res => {
        if (res) {
          console.log("所有bim", res);
          res.forEach((item, index) => {
            item.imgSize = [32, 32];
            item.imgSrc = require("@/assets/imgs/lv.png");
          });
          this.bimData = res;
        }
      });
    },

    //点击小区
    handleHome(point, returnValue, target, type) {
      let obj = returnValue.point;
      let id = obj.id;
      this.$router.push("/s?id=" + id);
    },

    // 点击点坐标赋值
    lookDetail(marker, index, str) {
      console.log(str, "strstrstrstr");
      this.infoWindowInfo = null;
      if (str === "xiaoqu") {
        let id = this.hasWorkOrderHome[index].id;
        this.$router.push("/s?id=" + id);
      } else if (str === "reyuan") {
        this.title = "维护人员";
        let obj = this.manData[index];
        console.log("obj1111维护人员1111111", obj);
        this.infoWindowInfo = obj;
        this.$set(this.infoWindowInfo, "showFlag", true);
      } else {
        let obj = this.bimData[index];
        this.title = obj.aliasname;
        // console.log("BIM obj11111111111", obj);

        if (obj.code) {
          this.$parent.hiddenSide();
          this.getBimUrlRequire(obj.code);
          this.dialogVisible = true;
        }
        // this.infoWindowInfo = obj;
        // this.$set(this.infoWindowInfo, "showFlag", true);
      }
    },

    // 获取bim模型
    getBimUrlRequire(code) {
      getBimUrl(code).then(res => {
        this.bimUrl = res;
        console.log("bim模型getBimUrlRequire ", res);
      });
    },

    infoWindowClose() {
      // console.log("关闭");
      this.$set(this.infoWindowInfo, "showFlag", false);
    },

    // 打开弹窗
    infoWindowOpen(marker) {
      // console.log("打开", marker);
      this.$set(this.infoWindowInfo, "showFlag", true);
    },

    // 地图初始化
    handler({ BMap, map }) {
      const self = this;
      self.setMapFun = { BMap, map };
      // const centerPoint = new BMap.Point(self.center.lng, self.center.lat);
      // map.centerAndZoom(centerPoint, self.zoom);
      // 自定义地图样式
      map.setMapStyleV2({
        styleJson: styleJson
      });
      var cityName = "上海市";
      var bdary = new BMap.Boundary();
      bdary.get(cityName, function(rs) {
        let arr = rs.boundaries;
        if (arr.length == 0) return;
        //获取行政区域
        var EN_JW = "180, 90;"; //东北角
        var NW_JW = "-180,  90;"; //西北角
        var WS_JW = "-180, -90;"; //西南角
        var SE_JW = "180, -90;"; //东南角
        let max = arr.reduce((a, b) => (a.length > b.length ? a : b));
        //4.添加环形遮罩层
        var ply1 = new BMap.Polygon(
          max + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW,
          {
            strokeColor: "none", //none
            fillColor: "#0B1D35", //#0B1D35
            fillOpacity: 1,
            strokeOpacity: 0.5
          }
        ); //建立多边形覆盖物
        map.addOverlay(ply1);
      });

      // 给每个区域添加名称
      self.dataArr.forEach(element => {
        // var bdary2 = new BMap.Boundary();
        bdary.get(element["name"], rs => {
          // var count = rs.boundaries.length;
          // for (let i = 0; i < count; i++) {
          //   var ply = new BMap.Polygon(rs.boundaries[i], {
          //     strokeWeight: 0.5, strokeColor: '#fff', fillOpacity: 0.6, fillColor: 'red'});  //#a9dbf7
          //    map.addOverlay(ply);
          // }
          self.citySetLabel(
            new BMap.Point(element["cp"][0], element["cp"][1]),
            element["name"],
            map
          );
        });
      });
    },

    citySetLabel(cityCenter, cityName, map) {
      // console.log(cityCenter, cityName, "888888888888888888");
      var label = new BMap.Label(cityName, {
        offset: new BMap.Size(-20, -10),
        position: cityCenter
      });
      label.setStyle({
        border: "none",
        background: "transparent",
        "font-size": "1rem",
        color: "#26a1b5"
      });
      map.addOverlay(label);
    },

    // 弹框显示文字判断
    textShowFun(name, text) {
      if (text === undefined || text === null) {
        return `<p>${name}：--</p>`;
      } else {
        if (text.length === 0) return `<p>${name}：--</p>`;
        else if (text.length > 10)
          return `<p>${name}：${text.substring(0, 10)}...</p>`;
        else return `<p>${name}：${text}</p>`;
      }
    },

    /*******   地图 end   **********/

    drawBoundary() {
      /*画遮蔽层的相关方法
       *思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。
       *      这样就做出了一个经过多次西北角的闭合多边形*/
      //定义中国东南西北端点，作为第一层
      //向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点
      var pStart = new BMap.Point(180, 90);
      var pEnd = new BMap.Point(0, -90);
      var pArray = [
        new BMap.Point(pStart.lng, pStart.lat),
        new BMap.Point(pEnd.lng, pStart.lat),
        new BMap.Point(pEnd.lng, pEnd.lat),
        new BMap.Point(pStart.lng, pEnd.lat)
      ];
      //循环添加各闭合区域
      pArray.push(new BMap.Point(135.077218, 48.544352));
      pArray.push(new BMap.Point(134.92218, 48.584352));
      pArray.push(new BMap.Point(134.827218, 48.534352));
      pArray.push(new BMap.Point(134.727669, 48.495377));
      pArray.push(new BMap.Point(134.304531, 48.394091));
      pArray.push(new BMap.Point(133.513447, 48.177476));
      pArray.push(new BMap.Point(132.832747, 48.054205));
      pArray.push(new BMap.Point(132.519993, 47.789172));
      pArray.push(new BMap.Point(131.765704, 47.813962));
      pArray.push(new BMap.Point(131.103402, 47.776772));
      pArray.push(new BMap.Point(130.919429, 48.331824));
      pArray.push(new BMap.Point(130.77225, 48.868729));
      pArray.push(new BMap.Point(129.907577, 49.351849));
      pArray.push(new BMap.Point(128.73015, 49.699156));
      pArray.push(new BMap.Point(127.791888, 49.85404));
      pArray.push(new BMap.Point(127.791888, 50.492084));
      pArray.push(new BMap.Point(126.927215, 51.616759));
      pArray.push(new BMap.Point(126.467283, 52.579818));
      pArray.push(new BMap.Point(125.952158, 53.059077));
      pArray.push(new BMap.Point(124.701142, 53.313247));
      pArray.push(new BMap.Point(123.56051, 53.664362));
      pArray.push(new BMap.Point(121.555204, 53.46722));
      pArray.push(new BMap.Point(120.340983, 53.125528));
      pArray.push(new BMap.Point(119.95464, 52.579818));
      pArray.push(new BMap.Point(120.616942, 52.523746));
      pArray.push(new BMap.Point(120.506559, 52.095236));
      pArray.push(new BMap.Point(119.862653, 51.616759));
      pArray.push(new BMap.Point(119.365926, 50.959196));
      pArray.push(new BMap.Point(119.089967, 50.362806));
      pArray.push(new BMap.Point(119.108364, 50.05583));
      pArray.push(new BMap.Point(118.133307, 49.925357));
      pArray.push(new BMap.Point(117.471005, 49.794528));
      pArray.push(new BMap.Point(116.808702, 49.889712));
      pArray.push(new BMap.Point(116.385564, 49.758785));
      pArray.push(new BMap.Point(115.962426, 48.953617));
      pArray.push(new BMap.Point(115.520891, 48.147476));
      pArray.push(new BMap.Point(115.796851, 47.677465));
      pArray.push(new BMap.Point(116.27518, 47.652609));
      pArray.push(new BMap.Point(117.103059, 47.652609));
      pArray.push(new BMap.Point(118.004526, 47.801568));
      pArray.push(new BMap.Point(118.887596, 47.577968));
      pArray.push(new BMap.Point(119.402721, 47.127871));
      pArray.push(new BMap.Point(119.402721, 46.800397));
      pArray.push(new BMap.Point(118.464459, 46.825659));
      pArray.push(new BMap.Point(117.103059, 46.648575));
      pArray.push(new BMap.Point(115.980824, 46.088213));
      pArray.push(new BMap.Point(115.226534, 45.702829));
      pArray.push(new BMap.Point(114.159491, 45.275796));
      pArray.push(new BMap.Point(112.761297, 45.171782));
      pArray.push(new BMap.Point(111.639061, 45.132727));
      pArray.push(new BMap.Point(111.436691, 44.55683));
      pArray.push(new BMap.Point(111.51028, 44.001703));
      pArray.push(new BMap.Point(110.682402, 43.387647));
      pArray.push(new BMap.Point(108.897864, 42.658724));
      pArray.push(new BMap.Point(106.892559, 42.522781));
      pArray.push(new BMap.Point(103.82021, 42.140555));
      pArray.push(new BMap.Point(102.422016, 42.536389));
      pArray.push(new BMap.Point(101.336575, 42.82146));
      pArray.push(new BMap.Point(99.478448, 42.929712));
      pArray.push(new BMap.Point(97.601924, 42.997272));
      pArray.push(new BMap.Point(96.019756, 43.815487));
      pArray.push(new BMap.Point(92.72664, 45.288784));
      pArray.push(new BMap.Point(91.144473, 45.599605));
      pArray.push(new BMap.Point(91.457227, 46.483616));
      pArray.push(new BMap.Point(90.794924, 47.553064));
      pArray.push(new BMap.Point(89.562305, 48.221295));
      pArray.push(new BMap.Point(88.2377, 48.953617));
      pArray.push(new BMap.Point(87.722576, 49.279683));
      pArray.push(new BMap.Point(87.097067, 49.255604));
      pArray.push(new BMap.Point(86.60034, 49.122957));
      pArray.push(new BMap.Point(86.177203, 48.710696));
      pArray.push(new BMap.Point(85.533297, 48.344091));
      pArray.push(new BMap.Point(85.404516, 47.875888));
      pArray.push(new BMap.Point(85.349324, 47.390897));
      pArray.push(new BMap.Point(84.926186, 47.215692));
      pArray.push(new BMap.Point(83.233635, 47.315881));
      pArray.push(new BMap.Point(82.865689, 47.328391));
      pArray.push(new BMap.Point(82.258578, 45.844449));
      pArray.push(new BMap.Point(82.368962, 45.366651));
      pArray.push(new BMap.Point(82.093003, 45.30177));
      pArray.push(new BMap.Point(80.989165, 45.275796));
      pArray.push(new BMap.Point(79.903724, 45.015402));
      pArray.push(new BMap.Point(80.326862, 44.332772));
      pArray.push(new BMap.Point(80.510835, 43.642047));
      pArray.push(new BMap.Point(80.621219, 43.186043));
      pArray.push(new BMap.Point(80.27167, 43.010775));
      pArray.push(new BMap.Point(79.885327, 42.304653));
      pArray.push(new BMap.Point(79.259819, 41.838593));
      pArray.push(new BMap.Point(78.487133, 41.576647));
      pArray.push(new BMap.Point(77.916816, 41.341363));
      pArray.push(new BMap.Point(77.272911, 41.16086));
      pArray.push(new BMap.Point(76.739389, 41.02167));
      pArray.push(new BMap.Point(76.26106, 40.546202));
      pArray.push(new BMap.Point(75.672346, 40.75639));
      pArray.push(new BMap.Point(74.881262, 40.630357));
      pArray.push(new BMap.Point(74.255754, 40.293095));
      pArray.push(new BMap.Point(73.777425, 39.939968));
      pArray.push(new BMap.Point(73.74063, 39.556517));
      pArray.push(new BMap.Point(73.53826, 39.34256));
      pArray.push(new BMap.Point(73.685438, 38.725549));
      pArray.push(new BMap.Point(74.034987, 38.407771));
      pArray.push(new BMap.Point(74.458125, 38.335352));
      pArray.push(new BMap.Point(74.734084, 38.074036));
      pArray.push(new BMap.Point(74.844468, 37.577865));
      pArray.push(new BMap.Point(74.678892, 37.21089));
      pArray.push(new BMap.Point(74.6237, 36.975076));
      pArray.push(new BMap.Point(75.414784, 36.501232));
      pArray.push(new BMap.Point(75.801127, 35.934721));
      pArray.push(new BMap.Point(76.518622, 35.379154));
      pArray.push(new BMap.Point(77.309706, 35.137703));
      pArray.push(new BMap.Point(77.972008, 34.758986));
      pArray.push(new BMap.Point(78.376749, 34.241106));
      pArray.push(new BMap.Point(78.523927, 33.473647));
      pArray.push(new BMap.Point(78.7079, 32.978834));
      pArray.push(new BMap.Point(78.450338, 32.745921));
      pArray.push(new BMap.Point(78.30316, 32.340745));
      pArray.push(new BMap.Point(78.431941, 32.04349));
      pArray.push(new BMap.Point(78.671106, 31.572152));
      pArray.push(new BMap.Point(78.855079, 31.145879));
      pArray.push(new BMap.Point(79.425395, 30.797108));
      pArray.push(new BMap.Point(80.087697, 30.447053));
      pArray.push(new BMap.Point(81.301919, 29.855455));
      pArray.push(new BMap.Point(81.90903, 30.0157));
      pArray.push(new BMap.Point(82.7921, 29.485907));
      pArray.push(new BMap.Point(84.539843, 28.661613));
      pArray.push(new BMap.Point(85.71727, 28.124721));
      pArray.push(new BMap.Point(86.821108, 27.732537));
      pArray.push(new BMap.Point(87.998535, 27.69979));
      pArray.push(new BMap.Point(88.568851, 27.716165));
      pArray.push(new BMap.Point(88.863208, 27.108656));
      pArray.push(new BMap.Point(89.580703, 27.190949));
      pArray.push(new BMap.Point(89.654292, 27.765274));
      pArray.push(new BMap.Point(90.923705, 27.650651));
      pArray.push(new BMap.Point(91.751584, 27.223849));
      pArray.push(new BMap.Point(92.04594, 26.778874));
      pArray.push(new BMap.Point(92.965805, 26.646689));
      pArray.push(new BMap.Point(93.830478, 26.960375));
      pArray.push(new BMap.Point(94.860727, 27.453873));
      pArray.push(new BMap.Point(96.185332, 27.798001));
      pArray.push(new BMap.Point(97.123594, 27.503101));
      pArray.push(new BMap.Point(97.620321, 27.896122));
      pArray.push(new BMap.Point(97.675513, 28.059457));
      pArray.push(new BMap.Point(98.080254, 27.306056));
      pArray.push(new BMap.Point(98.595378, 27.009824));
      pArray.push(new BMap.Point(98.393008, 26.066566));
      pArray.push(new BMap.Point(97.804294, 25.483523));
      pArray.push(new BMap.Point(97.528335, 24.847254));
      pArray.push(new BMap.Point(97.417951, 24.10637));
      pArray.push(new BMap.Point(97.804294, 23.717348));
      pArray.push(new BMap.Point(98.595378, 23.886634));
      pArray.push(new BMap.Point(98.834543, 23.123105));
      pArray.push(new BMap.Point(99.239283, 22.697005));
      pArray.push(new BMap.Point(99.165694, 22.303805));
      pArray.push(new BMap.Point(99.386462, 21.857966));
      pArray.push(new BMap.Point(100.251135, 21.445169));
      pArray.push(new BMap.Point(100.839848, 21.290063));
      pArray.push(new BMap.Point(101.704521, 21.031186));
      pArray.push(new BMap.Point(102.05407, 21.152053));
      pArray.push(new BMap.Point(101.998878, 21.582901));
      pArray.push(new BMap.Point(101.962083, 22.132497));
      pArray.push(new BMap.Point(102.587591, 22.355156));
      pArray.push(new BMap.Point(103.599443, 22.338041));
      pArray.push(new BMap.Point(104.482513, 22.560368));
      pArray.push(new BMap.Point(105.383981, 22.799392));
      pArray.push(new BMap.Point(106.083078, 22.59454));
      pArray.push(new BMap.Point(106.469421, 22.286683));
      pArray.push(new BMap.Point(106.874162, 21.754879));
      pArray.push(new BMap.Point(107.315697, 21.514051));
      pArray.push(new BMap.Point(107.812424, 21.410715));
      pArray.push(new BMap.Point(107.775629, 21.134792));
      pArray.push(new BMap.Point(106.929353, 20.269201));
      pArray.push(new BMap.Point(106.175064, 19.17158));
      pArray.push(new BMap.Point(106.377435, 18.470789));
      pArray.push(new BMap.Point(107.297299, 17.23746));
      pArray.push(new BMap.Point(109.008248, 15.675143));
      pArray.push(new BMap.Point(109.688948, 13.705222));
      pArray.push(new BMap.Point(109.652153, 11.664031));
      pArray.push(new BMap.Point(108.750686, 9.571001));
      pArray.push(new BMap.Point(108.198767, 6.876803));
      pArray.push(new BMap.Point(108.493124, 5.090099));
      pArray.push(new BMap.Point(109.817729, 3.612656));
      pArray.push(new BMap.Point(111.10554, 3.298351));
      pArray.push(new BMap.Point(114.71141, 5.514272));
      pArray.push(new BMap.Point(116.256783, 7.556636));
      pArray.push(new BMap.Point(118.758815, 10.883133));
      pArray.push(new BMap.Point(119.531502, 13.669242));
      pArray.push(new BMap.Point(119.494707, 16.617614));
      pArray.push(new BMap.Point(120.414572, 18.961654));
      pArray.push(new BMap.Point(121.51841, 20.633358));
      pArray.push(new BMap.Point(122.751029, 22.303805));
      pArray.push(new BMap.Point(123.247756, 23.378111));
      pArray.push(new BMap.Point(124.811526, 25.68375));
      pArray.push(new BMap.Point(126.577667, 25.900278));
      pArray.push(new BMap.Point(127.479134, 26.67975));
      pArray.push(new BMap.Point(128.454191, 28.189945));
      pArray.push(new BMap.Point(128.766945, 29.93561));
      pArray.push(new BMap.Point(128.73015, 31.650877));
      pArray.push(new BMap.Point(127.957464, 32.153119));
      pArray.push(new BMap.Point(127.221572, 32.745921));
      pArray.push(new BMap.Point(127.019202, 33.596907));
      pArray.push(new BMap.Point(125.988953, 33.827543));
      pArray.push(new BMap.Point(125.731391, 34.546135));
      pArray.push(new BMap.Point(125.878569, 35.454458));
      pArray.push(new BMap.Point(125.731391, 36.634799));
      pArray.push(new BMap.Point(125.80498, 37.51927));
      pArray.push(new BMap.Point(124.425183, 37.972159));
      pArray.push(new BMap.Point(124.498772, 38.58128));
      pArray.push(new BMap.Point(125.013896, 39.242487));
      pArray.push(new BMap.Point(124.590758, 39.471014));
      pArray.push(new BMap.Point(124.296402, 39.840762));
      pArray.push(new BMap.Point(124.388388, 40.081441));
      pArray.push(new BMap.Point(124.940307, 40.335346));
      pArray.push(new BMap.Point(125.731391, 40.630357));
      pArray.push(new BMap.Point(126.448885, 40.96591));
      pArray.push(new BMap.Point(126.798434, 41.493704));
      pArray.push(new BMap.Point(127.111188, 41.410654));
      pArray.push(new BMap.Point(127.883875, 41.271998));
      pArray.push(new BMap.Point(128.490985, 41.452192));
      pArray.push(new BMap.Point(128.307012, 41.879854));
      pArray.push(new BMap.Point(128.950918, 41.921089));
      pArray.push(new BMap.Point(129.484439, 42.12686));
      pArray.push(new BMap.Point(129.999564, 42.549994));
      pArray.push(new BMap.Point(130.073153, 42.807915));
      pArray.push(new BMap.Point(130.404304, 42.495557));
      pArray.push(new BMap.Point(130.77225, 42.359256));
      pArray.push(new BMap.Point(130.698661, 42.726583));
      pArray.push(new BMap.Point(131.195388, 42.848541));
      pArray.push(new BMap.Point(131.360964, 43.494895));
      pArray.push(new BMap.Point(131.342566, 44.491021));
      pArray.push(new BMap.Point(131.820896, 45.002351));
      pArray.push(new BMap.Point(132.998323, 44.976239));
      pArray.push(new BMap.Point(133.623831, 45.599605));
      pArray.push(new BMap.Point(134.102161, 46.394582));
      pArray.push(new BMap.Point(134.37812, 47.228226));
      pArray.push(new BMap.Point(134.874847, 47.851127));
      pArray.push(new BMap.Point(134.985231, 48.233588));
      pArray.push(new BMap.Point(135.13241, 48.454352));
      pArray.push(new BMap.Point(135.077218, 48.474352));

      //添加遮蔽层
      var plyall = new BMap.Polygon(pArray, {
        strokeOpacity: 1,
        strokeColor: "#091934",
        strokeWeight: 1,
        fillColor: "#091934",
        fillOpacity: 1
      }); //建立多边形覆盖物
      map.addOverlay(plyall);

      pStart = new BMap.Point(180, 90);
      pEnd = new BMap.Point(0, -90);
      pArray = [
        new BMap.Point(135.077218, 48.454352),
        new BMap.Point(pStart.lng, pStart.lat),
        new BMap.Point(pStart.lng, pEnd.lat),
        new BMap.Point(135.077218, 48.454352)
      ];
      var sanjiaoxing = new BMap.Polygon(pArray, {
        strokeOpacity: 1,
        strokeColor: "#091934",
        strokeWeight: 1,
        fillColor: "#091934",
        fillOpacity: 1
      }); //建立多边形覆盖物
      map.addOverlay(sanjiaoxing);
    }
  }
};
</script>

<style lang="scss" scoped>
.map {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  // z-index: -10;
  // border: 1px solid red;
  height: 88.5vh;
}

.bott {
  display: flex;
  justify-content: center;
  // z-index: 1000;
  // border: 1px solid red;
  // background: url("../assets/imgs/bottombg2.png") no-repeat;
  background: url("../../../assets/imgs/dbbjt2.png") no-repeat center bottom;
  // background-position: 0 5rem;
  background-size: 100% 130%;
  // background-color: rgba(0, 13, 43, 0.8);
  position: absolute;
  bottom: 0;
  // left: 29.32%;
  // right: 29.32%;
  left: 0;
  right: 0;
  > div {
    // z-index: 1000;
    // width: 18.75rem;
    // height: 16.125rem;
    height: 13rem;
    // border: 1px solid blue;
    cursor: pointer;
    > img {
      height: 100%;
    }
  }
}
</style>
<style>
/* *设置遮罩层样式 */
.map-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* 调整为地图容器的高度 */
  pointer-events: none;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 1002;
}

.el-dialog {
  width: 85rem !important;
  background-color: RGBA(1, 47, 95, 0.8) !important;
}
.el-dialog-url {
  width: 82.5rem !important;
  height: 38.75rem;
}
.el-dialog__body {
  padding: 0px 1.25rem 1.875rem 1.25rem !important;
}
.el-dialog__title {
  color: #fff;
  font-size: 1.25rem;
}

.BMap_bubble_title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  padding-left: 10px;
}

.BMap_pop {
  color: #fff;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
}

.BMap_pop .BMap_top {
  background: RGBA(1, 47, 95, 0.8) !important;
  border: 0 !important;
}

.BMap_pop .BMap_center {
  /* // width: 281px !important; */
  border: 0 !important;
  background: RGBA(1, 47, 95, 0.8) !important;
}

.BMap_pop .BMap_bottom {
  border: 0 !important;
  background: RGBA(1, 47, 95, 0.8) !important;
}

.BMap_pop div:nth-child(3) {
  background: transparent !important;
}

.BMap_pop div:nth-child(3) div {
  border-radius: 3px;
  background: RGBA(1, 47, 95, 0.8) !important;
  border: 0 !important;
}

.BMap_pop div:nth-child(1) {
  border-radius: 3px 0 0 0;
  background: transparent !important;
  border: 0 !important;
}
.BMap_pop > div:first-child > div:first-child {
  background: RGBA(1, 47, 95, 0.8) !important;
}

.BMap_pop div:nth-child(5) {
  border-radius: 0 0 0 3px;
  background: transparent !important;
  border: 0 !important;
}

.BMap_pop div:nth-child(5) div {
  border-radius: 3px;
  background: RGBA(1, 47, 95, 0.8) !important;
}

.BMap_pop div:nth-child(7) {
  background: transparent !important;
  /* // left: 226px; */
}

.BMap_pop div:nth-child(7) div {
  border-radius: 3px;
  background: RGBA(1, 47, 95, 0.8) !important;
}

/*替换箭头*/
img[src="http://api.map.baidu.com/images/iw3.png"] {
  /* // content: url('../images/iw3.png'); */
  width: 1px !important;
  height: 1px !important;
}

img[src="https://api.map.baidu.com/images/iw3.png"] {
  opacity: 0.7;
  /* // margin-top: -692px !important; */
  filter: alpha(opacity=70);
  /* // content: url('../images/iw3.png'); */
  width: 1px !important;
  height: 1px !important;
}

img[src="https://api.map.baidu.com/images/dest_markers.png"] {
  visibility: hidden;
  z-index: -1000 !important;
}

.anchorBL {
  display: none;
}

.pop_window {
  padding: 10px;
  padding-top: 5px;
  /* padding-bottom: 10px; */
}
.pop_window > div {
  margin-top: 7px;
}

.pop_window p {
  margin-top: 5px;
}
</style>