<!--
 * @Description: 高德地图容器
 * @Author: 王晓颖
 * @Date: 2022-05-12 16:04:00
 -->
<template>
  <div :id="vid" ref="mapContainer" class="amap-container" />
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
  name: 'AMapContainer',
  props: {
    vid: {
      type: String,
      required: true
    }, // 地图容器的id
    viewMode: {
      type: String,
      default: '3D'
    }, // 地图模式：2D,3D
    zoom: {
      type: Number,
      default: 13
    }, // 初始化地图级别
    zooms: {
      type: Array,
      default: () => [2, 18]
    }, // 地图范围 [2-18]
    center: {
      type: Array,
      required: true
    } // 初始化地图中心点位置 [lng,lat]
  },
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      const { vid, zoom, zooms, center, viewMode } = this
      window._AMapSecurityConfig = {
        securityJsCode: this.$store.getters.amapSecurityCode
      }
      AMapLoader.load({
        key: this.$store.getters.amapKey, // 设置您的key
        version: '2.0', // api版本，2.0
        plugins: ['AMap.ToolBar', 'AMap.Driving'], // 使用插件
        AMapUI: {
          version: '1.1',
          plugins: []
        },
        Loca: {
          version: '2.0'
        }
      }).then((AMap) => {
        window.AMap = AMap
        this.map = new AMap.Map(vid, {
          viewMode: viewMode,
          zoom: zoom,
          zooms: zooms,
          center: center
        })
        this.$emit('ready', this.map)
      }).catch(e => {
        this.$message.error('地图加载失败')
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.amap-container{
  width: 100%;
  height: 100%;
  padding: 0px;
  margin:0px;
}
</style>