vue + 百度地图 实现大屏嵌入地图

效果图

 1.首先在 pubilc 中 index.html 文件引入

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你申请的ak"></script>

 2.html 部分代码

<template>
  <div class="map_section">
    <div class="map_box" id="mapbox"></div>
  </div>
</template>

3.script 代码

<script>
// 引入图片 方便后期使用 鼠标hover显示文字
import mapAddressIcon from "@/assets/img/dp_image/huang_lv.png";
export default {
  name: "map-page-index",
  data() {
    return {
        allDataList: [
                 {
                    longitude: "118.89945",
                    latitude: "31.57325",
                    dwmc: "明觉支行",
                    data1: "1124",
                    isShow: true,
                    isShowTwo: true,
                    typeDataVlaue: "1"
                  },
        ], // 所有数组
        mapAddressIcon: mapAddressIcon, // 引入的图片
        map: null
        }
        },
mounted() {
    this.getDataFn();
  },
methods: {
    getDataFn(){
        this.initCreatedBmap();
        this.initAddMarker();
    },
//long = "119.03065", lat = "31.585568", zoomIndex = 11 默认位置  大小
initCreatedBmap(long = "119.03065", lat = "31.585568", zoomIndex = 11) {
      let map = new BMap.Map("mapbox", {
        enableMapClick: false
      });
      let region = "溧水区";
      this.drawPolygon(region);
      let point = new BMap.Point(long, lat);
      map.centerAndZoom(point, zoomIndex);
      map.enableScrollWheelZoom(true);
      map.setMapStyleV2({
        styleId: "74e2530c8ee1d179e8ff860bdd6a5100" // 这个id 需要自己去百度地图中发布
      });
// 也可以用系统自带的
      // map.setMapStyle({ style: "midnight" });
      this.map = map;
    },
    // 绘制行政区划轮廓
    drawPolygon(regionName) {
      let that = this;
      let bdary = new BMap.Boundary();
      bdary.get(regionName, function(rs) {
        let count = rs.boundaries.length;
        if (!count) {
          console.log("未能获取到当前输入的行政区域");
          return;
        }
        for (let i = 0; i < count; i++) {
          //创建多边形覆盖物
          let ply = new BMap.Polygon(rs.boundaries[i], {
            strokeWeight: 4,
            strokeColor: "#01D6F8",
            fillOpacity: 0.6,
            strokeStyle: "solid"
          });
          ply.setFillColor("#285E89");
          //添加覆盖物
          that.map.addOverlay(ply);
        }
      });
    },
    initAddMarker(arr) {
      let that = this;
      let dataArr = that.allDataList;
      let bigSize = new BMap.Size(30, 30);
      let icon1 = new BMap.Icon(that.mapAddressIcon, bigSize);
      dataArr.map(item => {
        let mapIcon = icon1;
        mapIcon.setImageSize(bigSize); // 背景图 大小
        let point = new window.BMap.Point(item.longitude, item.latitude);
        let labelContent = item.dwmc;
        let num = `${item.data1}`;
        let optsion = {
          point: 0,
          offset: 0,
          enableMassClear: true
        };
        let marker = new window.BMap.Marker(point, { icon: icon1 });
        let label = new window.BMap.Label(item.dwmc[0], optsion);
        // marker.setIcon(mapIcon)
        marker.setLabel(label);
        // 自行加判断
        // if (!item.isShow && !item.isShowTwo) {
          // 休业 撤防
          label.setStyle({
            // 设置label的样式
            width: "30px",
            height: "30px",
            background: item.typeDataVlaue == 1 ? "#1BE000" : "#FFF600",
            borderRadius: "50%",
            lineHeight: "22px",
            textAlign: "center",
            fontFamily: "Microsoft YaHei",
            fontWeight: "bold",
            color: "rgba(139, 139, 139, 1)",
            fontSize: "15px",
            borderWidth: "4px",
            borderStyle: "solid",
            borderColor: "rgba(0, 170, 44, 1)"
          });
        this.map.addOverlay(marker);
        // 点击跳转页面
        marker.addEventListener("click", async item => {
          let index = this.allDataList.findIndex(
            item => item.dwmc == labelContent
          );
          this.allDataList.forEach(item => {
            if (item.dwmc == labelContent) {
              this.ItemData = item;
            }
          });
          if (index != -1) {
            this.$router.push({
              name: "cockpit-cockpitTwoPageIndex",
              params: { name: labelContent, data: this.ItemData }
            });
          }
        });
// 鼠标划入 
        marker.addEventListener("mouseover", async () => {
          // if (item.typeDataVlaue == "1") {
            var label = new BMap.Label(
              `<span style="font-size: 15px;font-family: Microsoft YaHei;font-weight: bold;color: #FFF; line-height: 4px;display: inline-block;transform: skewX(20deg);">${labelContent}(${num})</span>`,
              {
                offset: new BMap.Size(0, -35)
              }
            );
            label.setStyle({
              textAlign: "center",
              width: "132px",
              height: "26px",
              transform: "skewX(-20deg)",
              background: "rgba(25, 244, 2, .7)",
              borderRadius: "2px",
              border: "2px solid #19F402",
              borderRadius: "5px",
              lineHeight: "26px"
            });
          // } 

          marker.setLabel(label);
        });
// 鼠标划出
        marker.addEventListener("mouseout", function(e) {
          var label = this.getLabel();
          //设置标签内容为空
          label.setContent("");
          //设置标签边框宽度为0
          label.setStyle({ border: "none", width: "0px", padding: "0px" });
        });
      });
    },
  },
  destroyed() {
    this.map = null;
  }
}
</script>

3. css 代码

.map_section {
  height: 599px;
  width: 837px;
.map_box {
    width: inherit;
    height: inherit;
  }
}
/* 隐藏地图的baidulogo */
::v-deep .anchorBL {
  display: none;
}

4.完成