vue实现百度地图打点自定义div显示内容

<template>
<div class="bmap-layout">
  <tipsBar/>
  <div class="unit" v-if="mapType == 'heat'">
    <div class="unitItem">
      <span class="text">锅炉房：</span>
      <span class="isNum">{{dataSys.guoLuFangNum}}个</span>
    </div>
    <div class="unitItem">
      <span class="text">运行锅炉：</span>
      <span class="isNum green">{{dataSys.unitOnNum}}台</span>
    </div>
    <div class="unitItem">
      <span class="text">停机锅炉：</span>
      <span class="isNum red">{{dataSys.unitFaultNum}}台</span>
    </div>
  </div>
  <div class="unit" v-if="mapType == 'water'">
    <div class="unitItem">
      <span class="text">给水所：</span>
      <span class="isNum">{{waterDate.number}}个</span>
    </div>
    <div class="unitItem">
      <span class="text">水泵数量：</span>
      <span class="isNum blue">{{waterDate.waterPumpNum}}台</span>
    </div>
    <div class="unitItem">
      <span class="text">运行水泵：</span>
      <span class="isNum green">{{waterDate.waterPumpOnNum}}台</span>
    </div>
    <div class="unitItem">
      <span class="text">故障水泵：</span>
      <span class="isNum red">{{waterDate.waterPumpFailNum}}台</span>
    </div>
  </div>
  <!-- <div class="project-search">
    <el-select
      v-model="projectKeys"
      clearable filterable
      placeholder="请选择项目"
      @change="projectSearch"
     >
      <el-option
        v-for="(item, idx) in projects"
        :key="idx"
        :label="item.label"
        :value="idx">
        <span>
          {{item.label}}
          <strong style="color:red;" v-if="item.status !== '0'">●</strong>
        </span>
      </el-option>
    </el-select>
  </div> -->
  <!-- <echartMap :mapType="mapType" v-bind="$props"/> -->
  <div id="mapWrap" @onmouseleave.stop :style="{width: width, height: height}"></div>
</div>
</template>

<script>
import echartMap from './bmap/echartBmap.vue';
import { mapState } from 'vuex';
import Vue from 'vue';
import $ from 'jquery';
import echarts from 'echarts';
import tipsBar from './tipsBar';
import bstyle from '@/data/bmap_style.json';
import {allProjectView, projectStatistics, waterDataStatics} from '@/axios/request';
import ComplexCustomOverlay from './mapDom';

Vue.prototype.$echarts = echarts;
let BMap = window.BMap;
export default {
  name: 'Bmap',
  components: {
    tipsBar,
    echartMap
  },
  // mixins: [loginMixins],
  data () {
    return {
      dataSys: {
        guoLuFangNum: '0',
        unitOnNum: '0',
        unitFaultNum: '0'
      },
      dataWater: [],
      left: 0,
      top: 0,
      mapLevel: 0,
      projectKeys: '',
      freshTime: 100000,
      map: null,
      data: [], // 房产段经纬度数据
      projectdb: [], // 项目经纬度数据
      projectMsg: {
        projectName: '0',
        deviceNum: '0',
        faultDeviceNum: '0',
        normalDeviceNum: '0',
        userNum: '0'
      },
      timerId: null,
      projectMsgFlag: false
    };
  },
  props: {
    // 地图类型，默认不传值为供热类型
    mapType: {
      type: String,
      default: 'heat'
    },
    height: {
      type: String,
      default: '493px'
    },
    width: {
      type: String,
      default: '100%'
    }
  },
  computed: {
    ...mapState({
      projects: state => state.projects
    }),
    waterDate () {
      let res = {
        number: 0,
        waterPumpOnNum: 0,
        waterPumpFailNum: 0,
        waterPumpNum: 0
      };
      this.dataWater.forEach(v => {
        res.number += v.number;
        res.waterPumpNum += v.waterPumpNum;
        res.waterPumpOnNum += v.waterPumpOnNum;
        res.waterPumpFailNum += v.waterPumpFailNum;
      });
      return res;
    }
  },
  mounted () {
    // this.getData();
    // this.timeId = setInterval(_ => {
    //   this.getData();
    // }, 5000);
    // 异步加载百度地图，避免html引入首次加载过多资源，
    // loadScript('http://lbsyun.baidu.com/custom/stylelist.js');
    // loadScript('https://api.map.baidu.com/api?v=3.0&ak=ahcBRskzNk2iBOKvWoH5Rq0RFt3R3ZUx&s=1', () => {
    //   if (BMap) {
    //     this.pageInt();
    //     this.houseMarkerClick();
    //     this.projectMarkerClick();
    //   } else {
    //     this.$message.error('百度地图未加载');
    //   }
    // });

    this.pageInt();
    this.houseMarkerClick();
    this.projectMarkerClick();
  },
  beforeDestroy () {
    clearInterval(this.timerId);
    clearInterval(this.timeId);
    clearInterval(this.timeZoomId);
  },
  methods: {
    getData () {
      if (this.mapType == 'heat') {
        projectStatistics().then(res => {
          if (res.code == 0) {
            this.dataSys = res.data;
          }
        });
      } else {
        waterDataStatics().then(res => {
          if (res.code == 0) {
            this.dataWater = res.data;
          }
        });
      }
    },
    projectSearch (index) {
      if (index !== '') {
        let lnt = this.projects[index].latitude;
        let lat = this.projects[index].longitude;
        this.setCenterMap(lat, lnt);
      } else {
        window.$map.centerAndZoom(new BMap.Point(126.521632, 45.757768), 9); // 初始化地图,设置中心点坐标和地图级别
      }
    },
    // 查询项目经纬度显示项目
    setCenterMap (lat, lnt) {
      let point = new BMap.Point(lat, lnt);
      this.map.centerAndZoom(point, 16); // 初始化地图,设置中心点坐标和地图级别
    },
    pageInt () {
      window.$map = this.map = new BMap.Map('mapWrap'); // 创建百度地图实例
      this.map.enableScrollWheelZoom(); // 允许百度地图缩放
      this.map.centerAndZoom(new BMap.Point(126.626267, 45.765213), 6); // 初始化地图,设置中心点坐标和地图级别
      this.map.setMapStyleV2({ styleJson: bstyle });
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
        target: document.querySelector('body')
      });
      this.getIntData();
      this.map.addEventListener('tilesloaded', () => {
        // this.pageInt();
        // this.houseMarkerClick();
        // this.projectMarkerClick();
      });
    },
    getIntData (callBack) {
      let id = Number.parseInt(JSON.parse(window.localStorage.getItem('userMsg')).id);
      allProjectView({ id: id }).then(res => {
        if (res.code === 0) {
          this.clearMapData(); // 清空数据
          // 房产段数据和项目数据处理
          this.data = [...res.data];
          this.data.forEach(v => {
            this.projectdb.push(...v.children);
          });

          // 管理员显示城市级别，段长显示项目级别
          const isProject = this.$route.query.showProject;
          if (isProject == 'false' || !isProject) {
            this.intHouseData(res.data); // 初始化显示房产段数据
          } else {
            let lng = this.projectdb[0].longitude;
            let lat = this.projectdb[0].latitude;
            this.map.centerAndZoom(new BMap.Point(lng, lat), 12); // 初始化地图,设置中心点坐标和地图级别
            this.intProjectData(this.projectdb); // 初始化显示房产段数据
          }

          this.loading && this.loading.close();
          this.$store.commit('setProjectMsg', res.data || []); // 项目信息存vuex

          let flag = false; // 播放标识，只要有一个告警那么播放
          for (var i = 0; i < res.data.length; i++) {
            if (res.data[i].status === '1') {
              flag = true;
              break;
            } else {
              flag = false;
            }
          }
          let audioBox = document.querySelector('#audioBox');
          // 判断新的告警
          if (flag) {
            // 判断是否是静音状态
            if (window.$muted) {
              audioBox.src = '';
            } else {
              audioBox.src = 'static/audio/warn2.mp3';
            }
          } else {
            audioBox.src = '';
          }
        } else {
          this.$message.warning(res.message);
          this.loading && this.loading.close();
        }
      }).catch(_ => {
        this.loading && this.loading.close();
      });
    },
    clearMapData () {
      let allOverlay = window.$map.getOverlays();
      for (let i = 0; i < allOverlay.length; i++) {
        window.$map.removeOverlay(allOverlay[i]);
      }
    },
    houseMarkerClick () {
      // const MAP = window.$map;
      // const that = this;

      // 鼠标点击
      $('#mapWrap').off('click', '.house-project-box');
      $('#mapWrap').off('mouseenter', '.house-project-box img');
      $('#mapWrap').on('click', '.house-project-box', function () {
        // that.clearMapData();
        // let index = $(this).attr('idx');
        // const projects = that.data[index] && that.data[index].children;
        // MAP.centerAndZoom(new BMap.Point(projects[0].longitude, projects[0].latitude), 12); // 初始化地图,设置中心点坐标和地图级别
        // that.intProjectData(projects);
      });

      // 鼠标移入事件
      $('#mapWrap').on('mouseenter', '.house-project-box img', function () {
        $(this).parent().parent().css({ 'zIndex': '999' });
        $(this).parent().parent().siblings().css({ 'zIndex': '9' });
      });
    },
    projectMarkerClick () {
      const that = this;

      // 鼠标点击
      $('#mapWrap').off('click', '.project-box');
      $('#mapWrap').off('mouseenter', '.project-box img');
      $('#mapWrap').on('click', '.project-box', function () {
        let projectId = $(this).attr('projectId');
        that.$router.push({ name: 'warningList', query: { projectId: projectId } });
        that.$store.commit('setTreeCurrentId', projectId);
      });

      // 鼠标移入事件
      $('#mapWrap').on('mouseenter', '.project-box img', function () {
        $(this).parent().parent().css({ 'zIndex': '999' });
        $(this).parent().parent().siblings().css({ 'zIndex': '9' });
      });
    },
    // 房产段数据显示
    intHouseData (data) {
      // 经纬度数据对象
      let pointData = [...data];
      const MAP = window.$map;
      let myIconW = '@/../static/images/map_warning.gif';
      let myIconN = '@/../static/images/map_normal.gif';
      pointData.forEach((item, index) => {
        let point = new BMap.Point(item.longitude, item.latitude); // 经纬度对象
        let imgSrc = item.status === '0' ? myIconN : myIconW;
        let innerHTML = `
          <div class="house-project-box" projectId="${item.id}" idx="${index}" projectName="${item.city}">
            <img src="${imgSrc}" />
            <div class="house-project-msg">
              <p class="title">${item.city}</p>
              <p>设备数量：${item.deviceNum}台</p>
              <p>正常运行：${item.normalNum}台</p>
              <p>正在告警：${item.alarmNum}台</p>
            </div>
          </div>`;
        let myCompOverlay = new ComplexCustomOverlay(point, innerHTML);
        MAP.addOverlay(myCompOverlay);
      });

      // 添加地图点击事件
      // this.houseMarkerClick();
      // 地图缩放显示对应的项目和房产段级别
      this.mapZoomEvent();
    },
    zoomstart () {
      this.clearMapData();
    },
    zoomend () {
      clearTimeout(this.timeZoomId);
      this.timeZoomId = setTimeout(() => {
        const MAP = window.$map;
        let Level = MAP.getZoom();
        if (Level <= 9) {
          this.intHouseData(this.data);
        } else {
          this.intProjectData(this.projectdb);
        }
      }, 1000);
    },
    mapZoomEvent () {
      const MAP = window.$map;
      // 移除事件
      MAP.removeEventListener('zoomstart', this.zoomstart);
      MAP.removeEventListener('zoomend', this.zoomstart);

      // 地图缩小显示房产段级别
      MAP.addEventListener('zoomstart', this.zoomstart);
      // 地图缩小显示房产段级别
      MAP.addEventListener('zoomend', this.zoomend);
    },
    // 项目数据显示
    intProjectData (data) {
      // let _this = this;
      // 经纬度数据对象
      let pointData = [...data];
      let myIconW = '@/../static/images/map_warning.gif';
      let myIconN = '@/../static/images/map_normal.gif';
      pointData.forEach(function (item, index) {
        let point = new BMap.Point(item.longitude, item.latitude); // 经纬度对象
        let imgSrc = item.status === '0' ? myIconN : myIconW;
        let innerHTML = `
          <div class="project-box" projectId="${item.id}" projectName="${item.label}">
            <img src="${imgSrc}" />
            <div class="project-msg">
              <p class="title">${item.label}</p>
              <p>设备数量：${item.deviceNum}台</p>
              <p>正常运行：${item.normalNum}台</p>
              <p>正在告警：${item.alarmNum}台</p>
            </div>
          </div>
        `;
        let myCompOverlay = new ComplexCustomOverlay(point, innerHTML);
        window.$map.addOverlay(myCompOverlay);
      });
    }
  }
};
</script>

<style lang="less" scoped>
  .bmap-layout {
    position: relative;
    margin-bottom: 10px;
    height: 735px;
    overflow: hidden;
    .unit {
      position: absolute;
      right: 10px;
      top: 60px;
      z-index: 1;
      // background-color: transparent;
      .unitItem {
        width: 190px;
        padding-left: 10px;
        min-width: 176px;
        height: 42px;
        background-color: #15186d;
        opacity: 0.8;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-weight: 700;
        .text {
          font-family: SourceHanSansCN-Bold;
          font-size: 21px;
          font-stretch: normal;
          letter-spacing: 2px;
          color: #00a0e9;
        }
        .isNum {
          font-family: SourceHanSansCN-Bold;
          font-size: 19px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 2px;
          color: #ffffff;
        }
      }
      .unitItem {
        span.red {
          color: #fd2037;
        }
        span.green {
          color: #0df338;
        }
        span.blue {
          color: #0cffea;
        }
      }
      .unitItem + .unitItem {
        margin-top: 6px;
      }
    }
    .btn {
      position: absolute;
      height: 30px;
      width: 120px;
      background: red;
      cursor: pointer;
    }
    .hailaer {
      left: 248px;
      top: 290px;
    }
    .qiqihaer {
      left: 281px;
      top: 457px;
    }
    .haerbin {
      left: 477px;
      top: 426px;
    }
    .mudanjiang {
      left: 628px;
      top: 535px;
    }
    // box-shadow: 0 0 15px #1d3594 inset;
    #mapWrap {
      width: 100%;
      height: 493px;
      border: 1px solid #1a41ab;
      // box-shadow: 0 0 5px #1d3594;
    }
    .box {
      min-height: 290px;
    }
    .project-search {
      position: absolute;
      z-index: 99;
      top: 40px;
      width: 100%;
      padding: 10px 0;
      text-align: center;
    }
    /deep/.project-box,
    /deep/.house-project-box {
      position: relative;
      width: 30px;
      height: 30px;
      cursor: pointer;
      img {
        height: 30px;
        width: 30px;
      }
      &:hover {
        .project-msg {
          display: block !important;
        }
        .house-project-msg {
          display: block !important;
        }
      }
      .project-msg,
      .house-project-msg {
        display: none;
        position: absolute;
        left: 22px;
        top: 22px;
        z-index: 999;
        height: 190px;
        width: 260px;
        padding: 20px;
        background: rgba(0, 0, 0, 0.75);
        .loading {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          text-align: center;
          background: rgba(0, 0, 0, 1);
          img {
            position: relative;
            top: 50%;
            width: 60px;
            height: 60px;
            margin-top: -30px;
          }
        }
        .title {
          margin-bottom: 10px;
          padding-bottom: 10px;
          border-bottom: 1px solid #fff;
        }
        p {
          color: #fff;
          margin-bottom: 10px;
        }
      }
    }
  }
</style>

mapDom.js内容

// 百度地图API功能
/* eslint-disable */

  let mp = window.BMap && new BMap.Map('mapWrap');;
  // 复杂的自定义覆盖物
  function ComplexCustomOverlay (point, innerHTML) {
    this._point = point;
    this.innerHTML = innerHTML;
    // this._text = text;
    // this._overText = mouseoverText;
  }
  if (window.BMap) {
    ComplexCustomOverlay.prototype = new window.BMap.Overlay();
    ComplexCustomOverlay.prototype.initialize = function (map) {
      this._map = map;
      let div = this._div = document.createElement("div");
      div.style.position = "absolute";
      div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
      div.innerHTML = this.innerHTML

      map.getPanes().markerPane.appendChild(div);

      return div;
    }
    ComplexCustomOverlay.prototype.draw = function () {
      let map = this._map;
      let pixel = map.pointToOverlayPixel(this._point);
      this._div.style.left = pixel.x + "px";
      this._div.style.top = pixel.y + "px";
    }
  }
  export default ComplexCustomOverlay;

bmap_style.json文件

[{
  "featureType": "background",
  "elementType": "geometry",
  "stylers": {
      "color": "070a1f"
  }
}, {
  "featureType": "road",
  "elementType": "labels.text.stroke",
  "stylers": {
      "weight": 0.2
  }
}, {
  "featureType": "poilabel",
  "elementType": "labels.text.stroke",
  "stylers": {
      "weight": 0,
      "color": "070a1f"
  }
}, {
  "featureType": "village",
  "elementType": "labels.text.stroke",
  "stylers": {
      "weight": 0
  }
}, {
  "featureType": "town",
  "elementType": "labels.text.stroke",
  "stylers": {
      "weight": 0
  }
}, {
  "featureType": "district",
  "elementType": "labels.text.stroke",
  "stylers": {
      "weight": 0
  }
}, {
  "featureType": "city",
  "elementType": "labels.text.stroke",
  "stylers": {
      "weight": 0
  }
}, {
  "featureType": "country",
  "elementType": "labels.text.stroke",
  "stylers": {
      "weight": 0
  }
}, {
  "featureType": "continent",
  "elementType": "labels.text.stroke",
  "stylers": {
      "weight": 0
  }
}, {
  "featureType": "districtlabel",
  "elementType": "labels.text.stroke",
  "stylers": {
      "weight": 0,
      "color": "070a1f"
  }
}, {
  "featureType": "poilabel",
  "elementType": "labels.text.fill",
  "stylers": {
      "weight": 40
  }
}]

html页面引入script

<script type="text/javascript" src="http://lbsyun.baidu.com/custom/stylelist.js"></script>

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=ahcBRskzNk2iBOKvWoH5Rq0RFt3R3ZUx&s=1"></script>

必须要去百度开发者平台申请对应的key,在首页html入口页面引入，上面的代码里面有些接口和一些不必要的东西可以不用看或者删掉就可以了。