<!--
 * @Description:
 * @Author: 王晓颖
 * @Date:
 -->
<template>
  <div ref="map" id="map" class="map-container"></div>
</template>

<script>
  import AMapLoader from '@amap/amap-jsapi-loader'
  export default {
    name: "amap",
    props:{
      theme:{
        type: String,
        default:'dark'
      }, // 主题颜色
      viewMode:{
        type:String,
        default:'3D'
      }, // 地图视图模式，2D or 3D
      zoom:{
        type: Number,
        default: 15
      }, // 缩放
      zooms:{
        type: Array,
        default:()=>{
          return [14,20]
        }
      }, // 缩放范围
      center:{
        type: Array,
        default:()=>{
          return [113.497393,22.289656]
        }
      }, // 地图中心
      pitch:{
        type: Number,
        default: -15
      }, // 俯仰角度
      rotation:{
        type: Number,
        default: 0
      }, // 顺时针旋转角度
    },
    data(){
      return {
        map:null // 地图对象
      }
    },
    mounted(){
      this.initMap()
    },
    methods:{
      initMap(){
        const {center, zoom, zooms, theme, viewMode,pitch, rotate} = this
        AMapLoader.load({
          "key": "b6c27a2051691fcb386543c800356e05",              // 申请好的Web端开发者Key，首次调用 load 时必填
          "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
          // "AMapUI": {             // 是否加载 AMapUI，缺省不加载
          //   "version": '1.1',   // AMapUI 缺省 1.1
          //   "plugins":[],       // 需要加载的 AMapUI ui插件
          // },
          "Loca":{                // 是否加载 Loca， 缺省不加载
            "version": '2.0'  // Loca 版本，缺省 1.3.2
          },
        }).then((AMap)=>{
          this.map = new AMap.Map(this.$refs.map,{
            resizeEnable: true,
            mapStyle:'amap://styles/'+theme,
            center: center,
            zoom: zoom,
            zooms:zooms,
            viewMode: viewMode,
            pitch: pitch,
            rotate: rotate
          });
        }).catch(e => {
          console.log(e)
        })
      }
    }
  }
</script>

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