<!-- 地图 -->
<script lang="ts" name="Map" setup>
import { load } from '@amap/amap-jsapi-loader'
import useMapStore from '@/store/modules/map'
const props = defineProps({
  center: { // 地图中心点
    type: Array,
    default: () => [],
  },
  zoom: { // 地图显示的缩放级别
    type: Number,
    default: 10,
  },
})
const mapInfo = useMapStore() // 地图信息
declare const window: any
const map = ref() // 地图实例
const initMap = () => { // 初始化
  if (!window._AMapSecurityConfig) {
    // 安全码
    window._AMapSecurityConfig = {
      securityJsCode: mapInfo.amapSecurityCode,
    }
  }
  load({
    key: mapInfo.amapKey, // 秘钥
    version: '2.0', // api版本，2.0
  }).then((AMap: any) => {
    map.value = new AMap.Map('container',
      {
        zoom: props.zoom, // 设置地图显示的缩放级别
        center: props.center, // 设置地图中心点坐标
        // layers: [new AMap.TileLayer.Satellite()],  //设置图层,可设置成包含一个或多个图层的数组
        // mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
        viewMode: '2D', // 设置地图模式
      })
    let toolbar
    AMap.plugin('AMap.ToolBar', () => { // 异步加载插件
      toolbar = new AMap.ToolBar() // 缩放工具条实例化
      map.value.addControl(toolbar)
    })
    if (props.center?.length) {
      const marker = new AMap.Marker({ // 标注
        position: props.center, // 位置
      })
      map.value.add(marker) // 标注添加到地图
    }
  })
}

onMounted(() => {
  if (!map.value) {
    console.log('地图初始化')
    initMap()
  }
})
</script>

<template>
  <div id="container" style="width: 100%; height: 100%;" />
  <div class="input-item">
    <input id="toolbar" type="checkbox" onclick="toggleToolBar(this)">工具条
  </div>
</template>