百度地图动态标点加信息窗体

<!--客户一览-->
<template>
  <div>
    <baidu-map class="map"
               :zoom="map.zoom" :center="{lng: map.center.lng, lat: map.center.lat}"
               @ready="handler" :scroll-wheel-zoom="true">
      <!--比例尺控件-->
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
      <!--缩放控件-->
      <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
      <!--聚合动态添加的点坐标-->
      <bm-marker-clusterer :averageCenter="true">
        <bm-marker v-for="marker of markers" :key="marker.code" :position="{lng: marker.lng, lat: marker.lat}"
                   :offset="{width: 0, height: 20}"
                   @click="lookDetail(marker)">
        </bm-marker>
      </bm-marker-clusterer>
      信息窗体
      <bm-info-window :position="{lng: infoWindow.info.lng, lat: infoWindow.info.lat}" :title="infoWindow.info.name"
                      :show="infoWindow.show" @close="infoWindowClose" @open="infoWindowOpen">
        <p>{{companyName}}</p>
        <p>设备 (<span class="success-text">在线数</span>/<span class="warning-text">不在线数</span>/<span
          class="default-text">总数</span>) ： <span class="success-text">{{onlineCount}}</span>/<span
          class="warning-text">{{notOnlineCount}}</span>/<span class="default-text">{{equipmentCount}}</span></p>
        <p>
          <el-button type="primary" class="w-100" @click="viewDeviceDetail">点击查看详情</el-button>
        </p>
      </bm-info-window>
    </baidu-map>
  </div>
</template>

<script>
  import {storePacks} from '@/contants'
  import BmScale from 'vue-baidu-map/components/controls/Scale'
  import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
  import BmMarkerClusterer from 'vue-baidu-map/components/extra/MarkerClusterer'
  import BmMarker from 'vue-baidu-map/components/overlays/Marker'
  import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
  import _ from "lodash";

  export default {
    components: {
      BmScale,
      BmNavigation,
      BmMarkerClusterer,
      BmMarker,
      BmInfoWindow,

    },
    computed: {
      tableData() {
        return this.$store.state[storePacks.TENANT].list
      },
      currentPage() {
        return this.$store.state[storePacks.TENANT].page
      },
      pageSize() {
        return this.$store.state[storePacks.TENANT].pageSize
      },
      total() {
        return this.$store.state[storePacks.TENANT].total
      },
      isDetailEmpty() {
        return _.isEmpty(this.$store.state[storePacks.TENANT].detail)
      },
      currentDetail() {
        return this.$store.state[storePacks.TENANT].detail
      }
    },
    data() {
      return {
        companyName:'',
        onlineCount:'',
        notOnlineCount:'',
        equipmentCount:'',
        map: {
          zoom: 8,
          center: {
            lng: 120.320388,
            lat: 31.692731
          }
        },
        markers: [
          {code: '001', lng: 120.320388, lat: 31.692731}
        ],
        infoWindow: {
          show: false,
          info: {
            id: '',
            lng: '',
            lat: '',
          }
        }
      }
    },
    methods: {
      handler() {

      },
      /**
       * 点击标注点
       * @param detail
       */
      lookDetail(detail) {
        this.infoWindow.info.lng = parseFloat(detail.lng)
        this.infoWindow.info.lat = parseFloat(detail.lat)
        this.infoWindow.show = true
        // this.infoWindowOpen(detail.code)
        // console.log(detail)
        this.companyName = detail.info.companyName
        this.onlineCount = detail.info.onlineCount
        this.notOnlineCount = detail.info.notOnlineCount
        this.equipmentCount = detail.info.equipmentCount
      },
      /**
       *公司查询
       */
      handleSearchList() {
        this.$store.dispatch(`${storePacks.TENANT}/getCompany`)
                .then(res => {
                  let arr = []
                  res.data.forEach((item,i)=>{
                    arr.push({code: item.id, lng: item.Longitude, lat: item.latitude,info:item})
                     this.handleSearch(item.id).then((res)=>{
                       console.log(res)
                       this.markers[i].info = res.data;
                       this.$set(this.markers,i,this.markers[i])
                     })
                  })
                  this.markers = arr;
                })
                .catch(err => {
                })
                .finally(() => {

                })
      },
      /**
       * 地图详情查询
       * */
      handleSearch(id) {
        return this.$store.dispatch(`${storePacks.TENANT}/getCompanyName`,id)

      },

      infoWindowClose() {
        this.infoWindow.show = false
      },
      /**
       * 信息窗体点击打开事件
       */
      infoWindowOpen() {

      },
      /**
       * 点击查看客户详情,跳转
       */
      viewDeviceDetail() {
        this.$router.push({name: 'DeviceDetail', params: {id: this.infoWindow.info.id}})
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.handleSearchList()
      })
    }
  }
</script>

<style lang="scss" scoped>
  .map {
    width: 100%;
    height: calc(100vh - 70px);
  }
</style>