<template>
   <div id="container"></div>
</template>
<script lang="ts" >
import {defineComponent,onMounted} from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader';
import { shallowRef } from '@vue/reactivity'
export default defineComponent({
   name: 'MapSelect',
  props: {
    map: Object,
  },
 setup(props, ctx) {
   window._AMapSecurityConfig = {
            securityJsCode:'ec6f8c65a04b41e168298850f64b9739',
  }
   const map = shallowRef(null);
   const initMap = ()=>{
        AMapLoader.load({
            key:"33424b3226727e5038f0756003f50060",             // 申请好的Web端开发者Key，首次调用 load 时必填
            version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins:[''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap) => {
             window.AMap = AMap;
            map.value = new AMap.Map("container",{  //设置地图容器id
                viewMode:"3D",    //是否为3D地图模式
                zoom:10,           //初始化地图级别
                center:[108.320004,22.82402], //初始化地图中心点位置
            });
            window.map = map.value;
            ctx.emit('update:map', map);
        }).catch(e=>{
            console.log(e);
        })
    };
    onMounted(()=>{
      initMap();

    })
   return {map,}

 }

});







</script>

<style  scoped>
    #container{
        padding:0px;
        margin: 0px;
        width: 100%;
        height: 800px;
    }
</style>
