<!---->
<template>
  <div>
    <div class="overview-map-container">
      <a-map-container
        ref="map"
        :center="center"
        :zoom="zoom"
        :base-layer="baseLayer"
        :style="{height:(bodyHeight-20)+'px'}"
        vid="overview"
        class="map-demo"
        @ready="mapReady"
      />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import AMapContainer from '@/components/Amap/AMapContainer'

export default {
  name: 'Overview',
  components: { AMapContainer },
  data() {
    return {
      map: null, // 地图对象
      baseLayer: 'gaode_vec', // 底图图层
      center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
      zoom: 12
    }
  },
  computed: {
    ...mapGetters([
      'bodyHeight'
    ])
  },
  methods: {
    // 初始化放这里
    mapReady(map) {
      this.map = map
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.overview-map-container{
  width: 100%;
}
</style>