<!-- 地图 -->
<template>
  <div id="container" style="width: 100%; height: 100%"></div>
  <div class="input-item">
    <input type="checkbox" id="toolbar" onclick="toggleToolBar(this)"/>工具条
  </div>
</template>
<script lang="ts" name="Map" setup>
declare const window: any;
// import {AMapLoader} from '@amap/amap-jsapi-loader'
import { load } from '@amap/amap-jsapi-loader'
const props = defineProps({
  position: {
    type: Array,
    default: () => []
  }
})

const map = ref() // 地图实例
const initMap = () => {
  // const { vid, zoom, zooms, center, viewMode, mapStyle } = this
  if (!window._AMapSecurityConfig) {
    // 安全码
    window._AMapSecurityConfig = {
      securityJsCode: '182a2c5889f7fe6d90546d9b8f4781ad',
    }
  }
  load({
    key: 'e1733551f35b56f6d8e9c0a9d4c2523b', // 秘钥，从store中取
    version: '2.0', // api版本，2.0
  }).then((AMap: any) => {
    map.value = new AMap.Map('container',
    {
      zoom: 15,  //设置地图显示的缩放级别
      center: props.position, //设置地图中心点坐标
      // layers: [new AMap.TileLayer.Satellite()],  //设置图层,可设置成包含一个或多个图层的数组
      // mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
      viewMode: '2D',  //设置地图模式
    })
    let toolbar;
    AMap.plugin('AMap.ToolBar',function(){ // 异步加载插件
      toolbar = new AMap.ToolBar(); // 缩放工具条实例化
      map.value.addControl(toolbar);
    });
    if(props.position?.length) {
      const marker = new AMap.Marker({
        position: props.position //位置
      })
      map.value.add(marker); //添加到地图

    }
  })
}

onMounted(() => {
  if(!map.value) {
    initMap()
  }
})
</script>