<script name="Home" setup lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader'
import { defineProps, nextTick, onMounted, reactive, ref, toRefs } from 'vue'
import { shallowRef } from '@vue/reactivity'
import useMapStore from '@/store/modules/map'
const mapSetting = useMapStore()
// window._AMapSecurityConfig = {
//   securityJsCode: '5f109e2a034c368311ce2c4d37711484',
// }
// console.log(mapSetting.amapSecurityCode)
// -----------------------**********************提醒：需要抽组件---------------------------------------
const initMap = () => {
  // const { vid, zoom, zooms, center, viewMode, mapStyle } = this
  if (!window._AMapSecurityConfig) {
    // 安全码
    window._AMapSecurityConfig = {
      securityJsCode: '182a2c5889f7fe6d90546d9b8f4781ad',
    }
  }
  AMapLoader.load({
    key: 'e1733551f35b56f6d8e9c0a9d4c2523b', // 秘钥，从store中取
    version: '2.0', // api版本，2.0
    // plugins: this.plugins, // 使用插件
    // AMapUI: {
    //   version: '1.1',
    //   plugins: this.uis,
    // },
    Loca: {
      version: '2.0',
    },
  }).then((AMap) => {
    const map = new AMap.Map('container')
  }).catch((e) => {
    console.error(e) // 加载错误提示
  })
}
initMap()
</script>

<template>
  <div class="home">
    <div
      id="container" style="height: calc(100vh - 50px); width: 100%; padding: 0;margin: 0;"
    />
  </div>
</template>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
</style>