<!-- 地图 -->
<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 AMapRef = ref<any>()
const initMap = () => { // 初始化
  if (!window._AMapSecurityConfig) {
    // 安全码
    window._AMapSecurityConfig = {
      securityJsCode: mapInfo.amapSecurityCode,
    }
  }
  load({
    key: mapInfo.amapKey, // 秘钥
    version: '2.0', // api版本，2.0
  }).then((AMap: any) => {
    AMapRef.value = AMap
    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) // 标注添加到地图
    }
  })
}
// 根据经纬度查询位置信息
// const searchPosition = (position: any[]) => {
//   new (AMapRef.value).plugin('AMap.Geocoder', () => {
//     const geocoder = new map.Geocoder({
//       // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
//       city: '028', // 成都
//     })
//     geocoder.getAddress(position, (status, result) => {
//       if (status === 'complete' && result.info === 'OK') {
//         // result为对应的地理位置详细信息
//         this.place = result.regeocode.formattedAddress
//         // this.place为返回的具体地理位置信息，里面无法使用return回来！
//       }
//     })
//   })
// }
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>