vue项目中百度地图显示自定义覆盖物

<template>
<div>
  <!-- 搜索框 -->
  <el-row style="position:absolute;top:105px;right:0;z-index:10000">
    <el-col>
      <el-input style="width:200px;" size="small" placeholder="请输入搜索地址" v-model="map_SearchValue" @keyup.enter.native="search_Button"></el-input>
      <el-button type="primary" size="small" @click="search_Button">搜索</el-button>
    </el-col>
  </el-row>
  <!-- 灯具集中器图标 -->
  <el-row style="position:absolute;left:12px;top:315px;z-index:10000">
    <el-col style="margin-bottom:7px">
      <div class="map_imgbox" @click="C_ShowButton"><img src="./asset/concentrator-button.png" style="width:100%;height:100%"/>
      </div>
    </el-col>
    <el-col style="margin-bottom:7px">
      <div class="map_imgbox" @click="Lamp_ShowButton"><img src="./asset/roadLampButton.png" style="width:100%;height:100%"/>
      </div>
    </el-col>
    <el-col>
      <div class="map_imgbox" @click="ReturnCenter"><img src="./asset/goCenter.png" style="width:100%;height:100%"/>
      </div>
    </el-col>
  </el-row>
  <!-- 地图容器 -->
  <div id="mapbox" class="commomLoading">
    <div id="allmap" class="allmap" style="height:height"></div>
  </div>
  <!-- 灯具或集中器详细信息弹出层 ,点击地图每个灯具或集中器弹出-->
  <div class="dialogbox" v-show="dialog_isshow==true">
    <el-row type="flex" justify="end"><div class="map_deletebox" @click="handleClose"><i class="el-icon-close"></i></div></el-row>
    <el-row>
      <h6 class="diogHeader">设备信息栏</h6>
    </el-row>
    <el-row>
      <p class="diogText">名称：集中器</p>
      <p class="diogText">类型：集中器</p>
      <p class="diogText">状态：工作状态</p>
      <p class="diogText">经度：{{deviceDetailData.lg}}</p>
      <p class="diogText">纬度：{{deviceDetailData.la}}</p>
    </el-row>
    <el-row>
      <h6 class="diogHeader">实时数据栏</h6>
    </el-row>
    <el-row>
      <p class="diogText">电压：220v</p>
      <p class="diogText">电流：0.5A</p>
      <p class="diogText">功率：110W</p>
      <p class="diogText">亮度：50LUX</p>
      <p class="diogText">电能：0.015kwh</p>
      <!-- <p class="diogText">半自动：200W</p> -->
    </el-row>
    <el-row>
      <h6 class="diogHeader">设备操作</h6>
    </el-row>
    <el-row type="flex" justify="space-around">
      <el-col :span="6">
        <el-button style="margin-top:10px;">关灯</el-button>
      </el-col>
      <el-col :span="6">
        <el-button style="margin-top:10px;">开灯</el-button>
      </el-col>
      <el-col :span="6">
        <el-button style="margin-top:10px;" @click="handleDataUpload">读取</el-button>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-around">
      <el-col :span="6">
        <el-button style="margin-top:10px;">自动</el-button>
      </el-col>
      <el-col :span="6">
        <p>调光值：</p>
      </el-col>
      <el-col :span="6">
        <el-input style="margin-top:10px;"></el-input>
      </el-col>
    </el-row>
  </div>
</div>
</template>

<script>
import BMap from 'BMap'
// import BMapLib from 'BMapLib' // 引入鼠标绘制
import controllerIcon from './asset/controle.png'
import lampicon from './asset/roadLamp.png'
import locationIcon from './asset/location.png'
import Qs from 'qs'
import {
  getCMarked,
  getLampMarked,
  doSend
} from './apis/index.js'
export default {
  data() {
    return {
      MarkedArr: [],
      LampMarkedArr: [],
      map: {}, // 地图对象实例
      map_SearchValue: '', // 绑定搜索框内容
      centerValue: '北京',
      dialogVisible: true,
      dialog_isshow: false,
      Devicecontent: '', // 设备详情模板
      centerLg: '', // 中心点经度
      centerLa: '', // 中心点纬度
      id: '',
      deviceDetailData: { // 设备信息详情
        lg: '',
        la: ''
      }
    }
  },
  created() {
    this.getCMarked()
    this.getLampMarkedArray()
  },
  mounted() {
    this.loadmap()
  },
  methods: {
    // 创建地图
    loadmap() {
      /** 创建地图对象，初始化地图中心点 */
      // 百度地图API功能
      var _that = this
      _that.map = new BMap.Map('allmap', { enableMapClick: false }) // 创建Map实例,关闭地图可点项
      // this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 20) // 初始化地图,设置中心点坐标和地图级别
      // 根据搜索返回的经纬度展示或者初始化显示地图中心点位置
      var point = new BMap.Point(116.404, 39.915)
      _that.map.centerAndZoom(_that.centerValue, 15) // （初始化）显示用户所在项目位置为中心点
      var text = this.getHtmlTemplete({ id: 110 })
      _that.addMarker(point, locationIcon, text)
      _that.map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
      var top_left_navigation = new BMap.NavigationControl()
      _that.map.addControl(top_left_navigation)
      /** 添加回到中心点定位控件 */
      // var geolocationControl = new BMap.GeolocationControl()
      // geolocationControl.addEventListener('locationSuccess', function(e) {
      //   // 定位成功事件
      //   var point = new BMap.Point(116.404, 39.915) // 回到中心点位置按钮，以用户项目所在区域位置为中心点
      //   _that.map.centerAndZoom(point, 15)
      // })
      // geolocationControl.addEventListener('locationError', function(e) {
      //   // 定位失败事件
      //   alert(e.message)
      // })
      // // 添加控件到地图
      // _that.map.addControl(geolocationControl)
    },
    // 生成自定义图标，位置：point, 图标：icon
    addMarker(point, icon) {
      // 设置灯具图标点尺寸
      const LdeviceSize = new BMap.Size(30, 30)
      // 生成灯具icon图标
      const LdeviceIcon = new BMap.Icon(icon, LdeviceSize, { // 会以base64的方式传参iconCar
        imageSize: LdeviceSize
      })
      // 创建灯具标注
      const Lmarker = new BMap.Marker(point, {
        icon: LdeviceIcon
      })
      // 覆盖物生成文字标签
      var label = new BMap.Label('', { offset: new BMap.Size(20, -10) })
      Lmarker.setLabel(label)
      // 将生成的灯具标注添加到地图上
      this.map.addOverlay(Lmarker)
      var _that = this
      Lmarker.addEventListener('click', function(e) {
        var p = Lmarker.getPosition() // 获取marker的位置
        _that.dialog_isshow = true
        _that.deviceDetailData.lg = p.lng
        _that.deviceDetailData.la = p.lat
      })
    },
    // 获取已经标注集中器经纬度数组
    getCMarked() {
      getCMarked().then(res => {
        if (res.rows.length > 0) {
          this.MarkedArr = []
          for (var i = 0; i < res.rows.length; i++) {
            if (res.rows[i].ismark) {
              console.log('集中器信息', res.rows[i])
              this.MarkedArr.push(res.rows[i])
              // 已标注的点在地图首页进行标注，注意：该请求与地图加载存在异步问题
              this.detailLg = res.rows[i].longitude
              this.detailLa = res.rows[i].latitude
              this.id = res.rows[i].id
              var point = new BMap.Point(res.rows[i].longitude, res.rows[i].latitude)
              this.addMarker(point, controllerIcon)
            }
          }
          console.log('已标注', this.MarkedArr)
        }
      })
    },
    // 获取已经标注灯具经纬度数组
    getLampMarkedArray() {
      getLampMarked().then(res => {
        if (res.rows.length > 0) {
          this.LampMarkedArr = []
          for (var i = 0; i < res.rows.length; i++) {
            if (res.rows[i].ismark) {
              this.LampMarkedArr.push(res.rows[i])
              // 已标注的点在地图首页进行标注，注意：该请求与地图加载存在异步问题
              var point = new BMap.Point(res.rows[i].longitude, res.rows[i].latitude)
              this.addMarker(point, lampicon)
            }
          }
          console.log('已标注灯具数据1', this.LampMarkedArr)
        }
      })
    },
    // 搜索城市或集中器、灯具
    search_Button() {
      if (this.map_SearchValue !== '') {
        this.centerValue = this.map_SearchValue
      }
      this.loadmap()
      this.getCMarked() // 改变中心点位置后，必须重新添加标注点（重新初始化）
      this.getLampMarkedArray()
    },
    // 数据下发
    handleDataUpload(index, row) {
      console.log('下发', row)
      this.$confirm('确认下发数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          var para = {
            operation: 'readtime',
            id: row.id,
            comid: row.comid
          }
          console.log('下发参数', para)
          var params = Qs.stringify(para)
          doSend(params).then(res => {
            this.$message({
              message: '下发成功',
              type: 'success'
            })
          })
        })
        .catch(() => { })
    },
    // 关闭设备详情
    handleClose() {
      this.dialog_isshow = false
    },
    C_ShowButton() {
      console.log('点击了集中器按钮')
    },
    Lamp_ShowButton() {
      console.log('点击了灯具按钮')
    },
    ReturnCenter() {
      console.log('回到地图中心')
      this.map.centerAndZoom(this.centerValue, 15) // （初始化）显示用户所在项目位置为中心点
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
#mapbox {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  #allmap {
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: "微软雅黑";
    position: absolute;
  }
}
.map_imgbox {
  width: 33px;
  height: 33px;
  border: 1px solid #edeeef;
  background: #fff;
  cursor: pointer;
}
.dialogbox{
  position:fixed;
  right:0px;
  top:160px;
  // top:20%;
  width:300px;
  background:#fff;
  padding-bottom:10px;
}
.map_deletebox{
  width:22px;
  height:22px;
  cursor:pointer;
}
.diogHeader{
  width:100%;
  height:36px;
  line-height: 36px;
  text-align: center;
  font-size: 14px;
  color:#666;
  margin:0;
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
}
.diogText{
  font-size: 14px;
  color:#666;
  padding-left:10px;
}
</style>