smsb-web-develop/src/views/device/detail/components/DeviceMap.vue

<template>
  <baidu-map
    v-if="center"
    :ak="ak"
    :center="center"
    :zoom="19"
    :dragging="false"
    :keyboard="false"
  >
    <bm-marker
      :position="center"
      @click="show = true"
    >
      <bm-info-window
        :show="show"
        @open="show = true"
        @close="show = false"
      >
        {{ device.address }}
      </bm-info-window>
    </bm-marker>
  </baidu-map>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmMarker from 'vue-baidu-map/components/overlays/Marker.vue'
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow.vue'

export default {
  name: 'DeviceMap',
  components: {
    BaiduMap,
    BmMarker,
    BmInfoWindow
  },
  props: {
    device: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      ak: process.env.VUE_APP_BAIDU_MAP_AK,
      show: false
    }
  },
  computed: {
    center () {
      const { longitude, latitude } = this.device
      return longitude && latitude
        ? {
          lng: Number(longitude),
          lat: Number(latitude)
        }
        : null
    }
  }
}
</script>